I can't for the life of me figure out what I'm doing wrong. I'm going off a John Linquist video doing some basic AngularJS routing. When I don't have my table in a partials folder and in my index.html page (and not using ng-view so I don't have to configure routing, it works fine. However, I try to inject my a partial view of my table with <ng-view></ng-view> then I get the error: http://goo.gl/nZAgrj (from the angular docs)
app.js
angular.module('enterprise',[])
.config(function($routeProvider){
$routeProvider.when("/",{templateUrl:"/partials/list.html"})
})
//this is the that iterated over in the partial view's ng-repeat
function AppController($scope){
$scope.crew =[
{name:'Picard',description:'captain'},
{name: 'Riker',description:'number 1'},
{name:'Word',description:'Security'}
]
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Routing</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
</head>
<body>
<div ng-app="enterprise" ng-controller="AppController">
<h2>Enterprise Crew</h2>
<ng-view></ng-view>
//list.html should be injected here
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
list.html
<table class="table table-striped" style="width: 250px">
<thead>
<tr>
<td>Name</td>
<td>Description</td>
<td><i class="glyphicon glyphicon-plus-sign"></i> </td>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in crew">
<td>{{person.name}}</td>
<td>{{person.description}}</td>
<td><i class="glyphicon glyphicon-edit"></i></td>
</tr>
</tbody>
</table>
You need to include ng-route.
angular.module('myApp', ['ngRoute']).
cdn:
http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js
And is it working like that?
angular.module('enterprise',[])
.config(function($routeProvider){
$routeProvider.when("/",{templateUrl:"/partials/list.html"})
})
.controller("AppController", ['$scope',
function ($scope){
$scope.crew =[
{name:'Picard',description:'captain'},
{name: 'Riker',description:'number 1'},
{name:'Word',description:'Security'}
];
}
]);
Ok, response is here : AngularJS 1.2 $injector:modulerr
Related
I want to make a table, based on this model (Material Design Lite) :
https://getmdl.io/components/index.html#tables-section
In my code, I have a list, and I try to display it, in the following way, by using a ng-repeat :
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Id. administrateurs</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="admin in listAdmins">
<td class="mdl-data-table__cell--non-numeric" ng-model="adminselected">{{admin}}</td>
</tr>
</tbody>
</table>
But the result is not the same than in the illustration example :
As we can see, there is no checkbox on the left and I don't understand why.
Also, how to make a table, where we can directly add data on it ?
In fact, with a fixed list, it works. But mine is generated by a request in a database, and its value can be changed. My listadmin is empty at the beginning, and it is completed by an authentification process.
Your code work correct.
<html ng-app="myApp">
<head>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script>
angular.module('myApp', []).controller('MainController', ['$scope', function($scope){
$scope.listAdmins = ['admin1', 'admin2', 'admin3'];
}]);
</script>
</head>
<body ng-controller="MainController as main">
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Id. administrateurs</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="admin in listAdmins">
<td class="mdl-data-table__cell--non-numeric" ng-model="adminselected">{{admin}}</td>
</tr>
</tbody>
</table>
</body>
</html>
May be some errors occurred? Can you see browser console.
I'm trying to load dynamic content with AngularJS but does not work.
I have a system with legacy pages with dynamic load using JQuery but now I am developing some new features using AngularJS and have same trouble in dynamic load.
The follow code show exact my problem (https://jsfiddle.net/alvarof/w7ynuro8/):
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/0.9.75/jsrender.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="static">
<div ng-controller="StaticCtrl">
<table>
<tr>
<th>Static Table</th>
</tr>
<tr ng-repeat="item in items">
<td>{[{item}]}</td>
</tr>
<tr ng-show="!items.length">
<td>No items!</td>
</tr>
</table>
</div>
</div>
<div id="dynamic">
</div>
<button onclick="loadDynamicContent()">Load dynamic content</button>
</body>
<script id="dynamic_tmpl" type="text/x-jsrender">
<div ng-controller="DynamicCtrl">
<table>
<tr>
<th>Dynamic Table</th>
</tr>
<tr ng-repeat="item in items">
<td>{[{item}]}</td>
</tr>
<tr ng-show="!items.length">
<td>No items!</td>
</tr>
</table>
</div>
</script>
<script>
var loadDynamicContent = function () {
$("#dynamic").html($("#dynamic_tmpl").render());
//FORCE RECOMPILE Angular????
}
var myApp = angular.module('myApp', []);
myApp.config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});
myApp.controller('StaticCtrl', function ($scope) {
$scope.items = ['StaticCtrl: element 1', 'StaticCtrl: element 2', 'StaticCtrl: element 3', 'StaticCtrl: element 4'];
});
myApp.controller('DynamicCtrl', function ($scope) {
$scope.items = ['DynamicCtrl: element 1', 'DynamicCtrl: element 2', 'DynamicCtrl: element 3', 'DynamicCtrl: element 4'];
});
</script>
</html>
Anyone had the same problem?
Thank you!
First of all your expression {[{item}]} is not correct check the documentation for angularjs expressions then why did you use ng-template refer template matching in angularjs
I'm trying to display some data from JSON file but I can't use ngRoute properly.
For the record, I'm running the files locally using CORS plugin for Chrome.
When I'm trying to access ~/project/13 (where 13 is an ID) the browser return "File not found". There's no errors in the console either.
Here's the code:
hello.js
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider
.when('/project/:projectId',{
controller:'GetProjectCtrl',
templateUrl:'project.html'
})
});
myApp.controller('GetProjectCtrl', ['$routeParams','$scope','$http', function($routeParams,$scope,$http){
$http.get('http://localhost:8080/project/'+$routeParams.projectId).
success(function(data) {
$scope.project = data;
});
console.log($routeParams.projectId);
}]);
project.html
<!doctype html>
<html>
<head>
<title>Project</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-route.js"></script>
<script src="hello.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-app="myApp">
<div id="wrapper">
<header>
<div class="header-left">
<h1>Sonar Monitoring Tool</h1>
</div>
</header>
<table ng-controller="GetProjectCtrl">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{project.id}}</td>
<td>{{project.name}}</td>
<td>{{project.url}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
What am I missing here?
Later edit
Apparently there is an error which is:
Not allowed to load local resource: file:///C:/Users/******/Desktop/Angular/project/13
You need to run youre site under a server. you can use https://www.npmjs.com/package/http-server a simple starters http server with zero configuration ,install using NPM.
I just got a book called "Pro Angular" from Apress by Adam Freeman. I have never used Angular JS before and I am not really sure why this isn't working but I'll explain where I am currently. Ok, so the first project I am currently doing is a basic to do list using Angular to bind certain data to html tags using data-binding and I've just added a line defining a module. Problem is my environment is claiming that the module is not being defined. I'm not sure what it is talking about. Here is my source so far.
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>TO DO List</title>
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap-theme.css" rel="stylesheet" />
<script src="angular.js"></script>
<script>
var model = {
user: "Adam",
items: [{ action: "Buy Flowers", done: false },
{ action: "Get Shoes", done: false },
{ action: "Collect Tickets", done: true },
{ action: "Call Joe", done: false }]
};
var todoApp = angular.module("todoApp", []);
todoApp.controller("ToDoCtrl", function ($scope) {
$scope.todo = model;
});
</script>
</head>
<body ng-controller="ToDoCtrl">
<div class="page-header">
<h1>
{{todo.user}}'s To Do List
<span class="label label-default">{{todo.items.length}}</span>
</h1>
</div>
<div class="panel">
<div class="input-group">
<input class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default">Add</button>
</span>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in todo.items">
<td>{{item.action}}</td>
<td><input type="checkbox" ng-model="item.done" /></td>
<td>{{item.done}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
The line it is talking about is Ln-18. Any help with an explanation would be greatly appreciated.
The header 'Speedruns' keeps getting repeated. How can I fix this?
Also, if there is a better way to do this please let me know.
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='styles.css'>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
<script>
var app = angular.module('player2', []);
app.controller('MainController', function($scope, $http) {
$scope.data0 = null;
$scope.urls = [ // List of REST api calls with with all the streams we want.
'http://api.speedrunslive.com/test/teamK',
];
$http.get($scope.urls[0]).success(function(data) {
$scope.data0 = angular.fromJson(data);
console.log(angular.fromJson(data))
});
});
</script>
</head>
<body ng-app='player2'>
<div ng-controller="MainController">
<table class="table-size" ng-repeat="chan in data0.channels">
<tr>
<th class="text-center" colspan="2">Speedruns</th>
</tr>
<tr>
<td class="text-left">{{chan.channel.display_name}}</td>
<td class="text-left">{{chan.channel.current_viewers}}</td>
</tr>
</table>
</div>
</body>
</html>
Attached a plunker with the code in it.
Plunker
The thing you want to repeat is the tr, so put your repeat on there. At the moment you are repeating whole the table. The following should work:
<table class="table-size" >
<tr>
<th class="text-center" colspan="2">Speedruns</th>
</tr>
<tr ng-repeat="chan in data0.channels">
<td class="text-left">{{chan.channel.display_name}}</td>
<td class="text-left">{{chan.channel.current_viewers}}</td>
</tr>
</table>