I am developing a web application. In my application, I am using Angular JS. I am new to Angular JS. But now I am having a problem my declaring controller. Here is my code.
<html>
<head>
//files references
</head>
<script>
var app = angular.module('memeApp',['ngRoute','ui.bootstrap']);
</script>
<nav class="nav-bar">
Home
Account
</nav>
<div class="content" ng-app="memeApp" ng-controller="DefaultController">
//content
</div>
</div>
</body>
</html>
As you can see I did nothing yet. I declare a controller named DefaultController. So when I check log, it is giving me following error:
So my controller is totally not working. When I add js code for controller as well. If I removed controller directive, errors gone. Why is my controller not working?
You need to define a controller function 'DefaultController' before you use it in html div tag.
Add below code in your script tag.
app.controller('DefaultController', ['$scope', function($scope){
}]);
You need to define your controller somewhere and add it as a dependency to the app first.
Example:
angular.module('app.controllers', [])
.controller('DefaultController' function() {
//do stuff
};
and in your app definition:
var app = angular.module('memeApp',['ngRoute','ui.bootstrap', 'app.controllers']);
Related
Is it possible to use Angular not for all the application but only for some parts ?
I use Express for the server side and few pages are already made. Should I rebuild them or can I use Angular for only some parts ?
If you want to build only some page in angular, do it something like this:
Add angular script in header.
define your body like this:
<body ng-app="myApp">
</body>
Define module like this:
<script>
var app = angular.module("myApp", []);
</script>
Now on those pages where you want to use angular define a ng-controller at the very first div like this:
<div ng-controller="myCtrl">
</div>
and now define your controller like this:
<script>
app.controller("myCtrl", function($scope) {
//here you can define all your logic for page.
});
</script>
I have injection problem. I have no idea why my html is not rendering.
Render HTML in the view; it should be processed/created in the controller, and then rendered in the html view.
This code is currently not working as the html appears as text:
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', myController);
myController.$inject = ['$scope']
function myController($scope) {
$scope.html = "<b>HTML inserted</b>";
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-controller="MyCtrl as vm">
<div>Html</div>
<div>{{html}}</div>
<br/>
</div>
For rendering of html in angular try the ng-bind-html attribute.
In your case:
<div ng-bind-html="html"></div>
More info:
ngBindHtml in AngularJS
Edit: Also add ngSanitize dependence:
ngSanitize
try adding 'ngSanitize' in your module dependencies if you're using ng-bind-html
I am new to angularJS and I was going through the AngularJS services tutorial.
I understood that Services are Singleton in AngularJS. Now my intention is
I will set a value to Service and that value should be able to access anywhere.
I created a service in one page and set the value from one Controller.
Now I accessed this service in anotherpage. I am getting the below error.
Uncaught Error: [$injector:modulerr]
I tried the below code.
page1.html
<html>
<head>
<title>Angular JS Services</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<h2>AngularJS Services</h2>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
Set name: <input type="text" ng-model="test">
<!-- <button ng-click="next('page2.html')">next</button> -->
<button ng-click="next()">Set the value</button>
</div>
<div ng-controller="SecondCtrl">
<button ng-click="next()">Go to next page</button>
</div>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.service('HelloService', function() {
var value ='';
this.setValue = function(a) {
value = a ;
};
this.getValue= function(){
return value ;
}
});
myApp.controller('FirstCtrl', function($scope, HelloService) {
$scope.next= function() {
alert("Value "+$scope.test);
HelloService.setValue($scope.test);
$scope.answer = HelloService.getValue();
alert($scope.answer);
}
});
myApp.controller('SecondCtrl', function($scope, HelloService,$window) {
$scope.next= function() {
$scope.newvalue = HelloService.getValue();
alert($scope.newvalue);
$window.location.href = 'page2.html';
}
});
</script>
</body>
</html>
page2.html
<html>
<head>
<title>Angular JS Services</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<h2>AngularJS Service test</h2>
<div ng-app="myApp">
<div ng-controller="SecondCtrl">
<button ng-click="retrieve()">Retrieve the value</button>
</div>
</div>
<script>
var myApp = angular.module('myApp', ['HelloService']);
myApp.controller('SecondCtrl', function($scope, HelloService) {
$scope.retrieve= function() {
alert("2nd page");
$scope.newvalue = HelloService.getValue();
alert($scope.newvalue);
}
});
</script>
</body>
</html>
Angular is a single page applications framework, your two pages are two different angular applications and services (and other resources) can't be shared between them.
You can create a multi-view application using routes. please check angular tutorials
When the page reloads, e.g., from page1 to page2, everything resets. The singleton value will persist if you inject it into controllers in the current page-load. The most common way to do this is to use ng-view / Routing. In that instance, you'd create a skeleton page of html, body, etc, and remove the content that's different between page1 and page2. Put those differences into .html "partial" files and then use ng-view / Routing to load each partial based on URL state and it'll use the same service singleton.
https://docs.angularjs.org/api/ngRoute/directive/ngView
Angular service is just javascript object. It is stored inside angular as well as your module, controllers, directives etc.
In simple case your application is "single page" (however may be quite reach), which means that you have i.e. index.html, where you include angular.js and your custom components.
When people talk about views and pages in angular, they usually mean 'part of page', not real 'pages' like index.html/#home, index.html/#view1, ... (this urls may look like /home, /view1 in html5 mode) -- however if you inspect html source of any such page you will see that it is the same.
You can say that angular singleton is an object that is created once per angular load.
When you change real browser page, browser will discard all js objects: angular itself as well as your factories, etc.
If you just use a value to share across your app, you should use a type service value:
angular.module('myValue')
.value('myShareValue', 123);
and then inject into your module app and controller.
myApp = angular.module('myApp', ['myValue']);
myApp.controller('myController', [
'$scope', 'myShareValue',
function($scope, myShareValue){
$scope.valueShare = myShareValue;
}
]);
You can read this slides in spanish and see the differences between types of services angular. Also this video
i am learning angular js.from this site https://docs.angularjs.org/api/ng/function/angular.bootstrap it is saying Use this function to manually start up angular application.
<html>
<body>
<div ng-controller="WelcomeController">
{{greeting}}
</div>
<script src="angular.js"></script>
<script>
var app = angular.module('demo', [])
.controller('WelcomeController', function($scope) {
$scope.greeting = 'Welcome!';
});
angular.bootstrap(document, ['demo']);
</script>
</body>
</html>
what is the meaning of this line angular.bootstrap(document, ['demo']); ?
the above program just create a module and controller but it use bootstrap.......without bootstrap controller can not be instantiated ?.
looking for guidance. thanks
angular.bootstrap is used as an alternative approach to initializing your application without using ng-app. In the above example, you can see that there is no ng-app directive added anywhere in the document. Therefore, using angular.bootstrap you defined the app module to be associated with the document which is demo in the above example.
You can also define the modules to be used with any element that can be identified by using document.getElementById() function in the first parameter of angular.bootstrap.
Using angular.bootstrap
<html>
<body>
<div class="mycontainer" ng-controller="WelcomeController">
{{greeting}}
</div>
<script src="angular.js"></script>
<script>
var app = angular.module('demo', [])
.controller('WelcomeController', function($scope) {
$scope.greeting = 'Welcome!';
});
angular.bootstrap(document.getElementById('mycontainer'), ['demo']);
</script>
</body>
For running multiple apps in an HTML document you need to manually bootstrap them using angular.bootstrap
I am kind of new to angular JS and this might be the simple question but i am stuck on this.
What i am trying to do is, I have one page and on that page I want to add a template. My template is kind of dynamic and have it's own controller. My code is something like this..
-- Main Page HTML --
<html ng-app="myApp">
<body ng-controller="MyAppCtrl">
<my-component>
</my-component>
</body>
</html>
-- Main page JS --
var myAppModule = angular.module('myApp');
myAppModule.controller('MyAppCtrl', function ($scope) {
})
.directive('myComponent', function () {
return {
restrict: 'E',
templateUrl: 'myComponent.aspx'
};
});
-- Template(myComponent.aspx) --
<html>
<!-- include template script -->
<body ng-controller="ComponentCtrl">
<div ng-click="showAlert()">
myBtn
</div>
</body>
</html>
-- Template page JS --
var templareModule = angular.module('myApp', []);
templareModule.controller('ComponentCtrl', function ($scope, $http) {
$scope.showAlert = function () {
alert("clicked");
}
});
So for this I am unable to get alert on click.
Thanks in advance.
You really don't need to create a custom directive to be able to do what you describe in your question and since you're a beginner I would suggest you start simple and do without the directive. You will need to use the ng-view tag and routing. There are some other minor issues with your code, some of which were already pointed out by others in the comments. The following code worked for me.
index.html:
<html ng-app="myApp">
<body>
<h1>Test</h1>
<div ng-view></div>
<script> (Insert paths to required Angular scripts and your JS files)</script>
</body>
</html>
App JS file:
Note: You will need to download the ngRoute JavaScript file from Angular's website and include it in your project to get the routing to work correctly. (Go to Downloads on their website, pick your version of Angular, then download ngRoute)
angular.module('myApp', [ 'ngRoute' ])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'myComponent.aspx',
controller: 'ComponentCtrl'
})
}])
.controller('ComponentCtrl', function ($scope) {
$scope.showAlert = function () {
alert("clicked");
}
});
myComponent.aspx:
<div class="ComponentCtrl">
<div ng-click="showAlert()">
myBtn
</div>
</div>
Let me know if you have questions or are still unable to get it to work. I would also suggest you check out some tutorial videos on Egghead.io's website. It helped me figure out the basics of Angular.