I'm learning Angular.js right now by following along with the videos at Egghead.io. I'm at the $routeProvider video, and my app isn't routing at all.
It's ultra basic, here's the script (app.js):
var app = angular.module('myApp', []);
// routes
app.config(function ($routeProvider) {
$routeProvider.when('/pizza', { template: 'Yum!!' });
});
app.controller('FirstCtrl', function ($scope) {
$scope.data = { message: "Hello" };
});
And the html:
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
{{data.message + " world"}}
</div>
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.3/angular.min.js"></script>
<script src="app.js"></script>
From my understanding, http://host/#/pizza should simply show "Yum!!" since I'm passing a string in the template. It doesn't appear to do anything though, I still get "Hello world" as evaluated by the FirstCtrl.
Why isn't the $routeProvider doing anything in my app?
You need to put an ng-view element in where you want the routeProvider to stick the page's template.
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
{{data.message + " world"}}
<ng-view></ng-view>
</div>
</div>
Note that indicating it like below keeps you cross-browser compliant.
<div ng-view> </div>
or, for that matter:
<ANY ng-view> </ANY>
More information is available here:
http://docs.angularjs.org/api/ng.directive:ngView
Related
I'm still learning AngularJS and having trouble with UI Router.
It just won't load the template.
Here's my code:
<body class="top-navigation" ng-app="mixcontainer">
<div id="wrapper">
Navbar here
</div>
<div class="row m-b-lg m-t-lg" ng-controller='MainCtrl'>
<div ui-view></div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
and my angular app.js:
var app = angular.module('mixcontainer',['ui.router'])
app.config(function($stateProvider){
var test = {
name: 'test',
url: '/test',
template: '<h3>Hello world</h3>',
controller: 'MainCtrl'
}
$stateProvider.state(test);
})
app.controller('MainCtrl',['$scope','$state','$rootScope', function($scope,$state,$routeScope){
}])
I tried multiple times and no matter what angular won't yield ui-view whether it is a template or templateUrl. I also don't have any error on my browser's or server's console. I've been on it for a week and it is driving me nuts.
Try create your ui-routes by using $stateProvider('nameOfState', configurationObject) in the right way. Switch your routes by using $state e.g. inside your controller logic. Here is a working fiddle example which will help you.
var app = angular.module('mixcontainer',['ui.router'])
app.config(function($stateProvider){
$stateProvider.state("test", {
url: "/test",
template: "<h3>Hello world</h3>",
controller: "MainCtrl"
});
});
http://codepen.io/krabbypattified/pen/oYxmKz
View above Codepen. The Chrome DevTools console returns Error: [$injector:modulerr]. The same error occurs when script area is commented.
However, when script area is commented and the (identical) JS section is uncommented, Angular works fine with no errors. Why does this happen??
Note: I have a large application and isolated the bug to this phenomenon. I'm using a Prepros server and I'm getting this same annoying $injector error.
<div ng-app="testApp">
<div ng-controller="testController">
<h1>{{title}}</h1>
</div>
</div>
<script>
var app = angular.module('testApp',[]);
app.controller('testController', function($scope){
$scope.title = "Hello, World!";
});
</script>
<div ng-app="testApp">
<div ng-controller="testController">
<h1>{{title}}</h1>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script>
var app = angular.module('testApp', []);
app.controller('testController', function($scope) {
$scope.title = "Hello, World!";
});
</script>
Your angularjs library reference is not applied to your code.
In codepen,Attach your script in HTML rather than mentioning in settings window,
CODEPEN DEMO
Problem is codepen in HTML window you can have only HTML code,
Check here it works,
<body>
<div ng-app="testApp">
<div ng-controller="testController">
<h1>{{title}}</h1>
</div>
</div>
<script>
var app = angular.module('testApp', []);
app.controller('testController', function($scope) {
$scope.title = "Hello, World!";
});
</script>
</body>
DEMO
Codepen adds the code after the HTML, so the script you have initializing Angular won't have access to angular. If you change to this it will work.
<div ng-app="testApp">
<div ng-controller="testController">
<h1>{{title}}</h1>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script>
var app =
angular.module('testApp', []).controller('testController', function($scope){
$scope.title = "Hello, World!";
});
</script>
I was learning about AngularJS views from here. The example which the site has shown is supposed to output this:
However, the output is not showing in my fiddle:
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
}).
when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'ViewStudentsController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]);
mainApp.controller('AddStudentController', function($scope) {
$scope.message = "This page will be used to display add student form";
});
mainApp.controller('ViewStudentsController', function($scope) {
$scope.message = "This page will be used to display all the students";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<h2>AngularJS <a href='http://www.tutorialspoint.com/angularjs/angularjs_views.htm'>ng-template example</a></h2>
<div ng-app = "mainApp">
<p>Add Student</p>
<p>View Students</p>
<div ng-view></div>
<script type = "text/ng-template" id = "addStudent.htm">
<h2> Add Student </h2>
{{message}}
</script>
<script type = "text/ng-template" id = "viewStudents.htm">
<h2> View Students </h2>
{{message}}
</script>
</div>
I believe, I have selected LOAD TYPE correctly:
What am I doing wrong here?
In order to get ngRoute working you have to add :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
The problem was caused by missing inclusion of ngRoute module
working example
You have wrong hrefs, those should have / before them. Also you haven't added angular-route.js in your Fiddle.
Markup
<p>Add Student</p>
<p>View Students</p>
Demo Fiddle
I had already declared my app and controller in separate file and below is how i am loading my controller html DOM but it is not showing that message. Can someone please guide how to achieve this.
HTML:
<div id="bnProblemList">
<div ng-controller="problemListCtrl" data-ng-init="init()">
<div ng-view="">this is my message = {{message}}</div>
</div>
</div>
JS:
html = $j('#bnProblemList').html();
$compile(html)(scope);
Please let me know how to inject or load ng-controller html dynamically.
Your controller declaration is wrong. You should do it like this:
var myApp = angular.module('myApp',[]);
myApp.controller('problemListCtrl', ['$scope',
function($scope) {
$scope.message = "This is my message :-)";
}
]);
A proper way is to declare your Controller into an anonymous function, and add it to a module. Then, you have to set your ngApp.
Controller.js
Here, we will declare our controller, and create an app module. Then, we will declare ctrl as our controller into our app module.
(function(){
function Controller($scope) {
$scope.name = 'toto';
}
angular
.module('app', [])
.controller('ctrl', Controller);
})();
HTML
<body ng-app='app' ng-controller="ctrl">
<p>My name is {{name}}</p>
</body>
And don't forget to include your script tag :
<script src="controller.js"></script>
You can try Like below Example:-
Html Page:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title> Controller</title>
<script src="../Js/angular.min.js"></script>
<script src="../Js/Controller.js"></script>
</head>
<body>
<div ng-controller="MyFirstController">
{{ Msg }}
</div>
</body>
</html>
ControllerJs Page:
var MyApp=angular.module("MyApp",[]);
MyApp.controller("MyFirstController",function($scope){
$scope.Msg="Hello First Conroller";
})
i was able to load/ inject controller dynamically by the help of below code
<div id="bn" ng-controller="myCtrl as vm">
<div ui-view=''></div>
</div>
<script>
angular.element(document).injector().invoke(function($compile, $state) {
$state.go('myCtrl');
var scope = angular.element($j("#bn")).scope();
$compile($j("#bn"))(scope);
});
</script>
UPDATE: It works in Firefox, but not in Chrome! Any ideas???
I am following a tutorial that creates a simple list of Smartphones/Tablets with thumbnails.
http://docs.angularjs.org/tutorial/step_07
The Problem: After I did step 7, the thumbnails won't load anymore.
It actually was working the step before, but I can't figure out what I did wrong. If I call the image URLs in the URL bar directly, it works. But Angular can't do it, somehow. I don't get any errors in Chrome's JavaScript console either.
The Thumbnails are located under /app/img/phones/ (e.g. /app/img/phones/dell-streak-7.0.jpg)
Below are the files I think of that are relevant. If you need more intel, let me know. Thanks a lot!
/app/index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Angular imports -->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<!-- My imports -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
/app/partials/phone-list.html
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</div>
<div class="span10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
<img ng-src="{{phone.imageUrl}}">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
/app/js/app.js
'use strict';
/* App Module */
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers'
]);
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}
]);
/app/js/controllers.js
'use strict';
/* Controllers */
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
})
$scope.orderProp = 'age'
}
]);
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.phoneId = $routeParams.phoneId
}
]);
Try without the {{}} around the url in the ng-src attribute.
The ng-src directive takes an expression as the parameter so you don't need to use the binding syntax {{}}. The binding syntax basically is a way to tell angular to expect an expression.
The documentation on http://docs.angularjs.org/api/ng/directive/ngSrc isn't absolutely crystal clear because they use the binding syntax within the expression.
<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>
I have found the solution.
It worked in Firefox as-is, but not in Chrome. Clearing the browsing data didn't help at all. The problem was caused by AngularJS Batarang in some way I don't know.
So I have disabled the Chrome extension AngularJS Batarang and it instantly worked.
See report here: https://github.com/angular/angularjs-batarang/issues/107