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
Related
I have a problem with my tooltip.
I have something like this
<span uib-tooltip="{{displayName()}}"></span>
and in js file
function displayName() {
return '<div>' +
name +
'div' +
'<b>something</b>'
}
So I have escape characters and I don't know how to deal with it. Obviously, I would like to display in my tooltip properly code, without
"div" etc.
How can I deal with it? I know that earlier we can use tooltip-html-unsafe, but it's deprecated now.
Parse the HTML as safe using the $sce service and use uib-tooltip-html as specified in the ui-bootstrap docs.
In HTML:
<span uib-tooltip-html="displayName()"></span>
In controller:
app.controller("AppCtrl", function ($scope, $sce) {
$scope.displayName = function () {
return $sce.parseAsHtml('<div>' + name + '</div><b>something</b>');
}
});
I'm not sure if this is what you want, but
You can have a tooltip with a template, which will parse / compile your HTML for you. You would need to use uib-tooltip-template. Here is a demo:
var app = angular.module('myApp', ["ui.bootstrap"]);
app.controller('myCtrl', function($scope) {
$scope.name = "'Any name'";
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<span uib-tooltip-template="'tooltipTemplate.html'" tooltip-placement="bottom">Tooltip with a template</span>
<!-- separate file -->
<script type="text/ng-template" id="tooltipTemplate.html">
<div>
{{name}}
</div>
<b>something else</b>
</script>
</div>
</body>
</html>
Simply installing ngSanitize and including it in your app will allow you to use uib-tooltip-html (rather than uib-tooltip) without worrying about safety.
https://docs.angularjs.org/api/ngSanitize
After installing, you can include it in your app:
var app = angular.module('myApp', [...,'ngSanitize']);
And of course, make sure you include the plugin in your build files. Personally, this allowed me to replace a lot of old unsafe tooltips very easily during upgrades from previous versions.
The following angular piece doesn't work, it seems that in the immediately invoked function the code breaks where I create my module because angular syntax is not recognised.
<!DOCTYPE html>
<html ng-app="MyModule">
<head>
<script data-require="angular.js#*" data-semver="4.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2.min.js"></script>
</head>
<body ng-controller="MyCtrller">
<h1>Hello!</h1>
{{ cousin }}
</body>
</html>
<script type="text/javascript">
(function() {
var app = angular.module("MyModule", []);
var MyCtrller = function($scope) ///typo here in "MyCtrller"
{
$scope.cousin = "Karen";
}
app.controller("MyCtrller", ["$scope", MyCtrller]);
}());
</script>
I expect the result to be Karen.
Instead, I see {{ cousin }}
The error I get in console is:
Uncaught ReferenceError: angular is not defined
on the line where I create my module:
var app = angular.module("MyModule", []);
Your problem is that you are including the v2.0 version of angular (a.k.a. Angular), instead of 1.x version (a.k.a. AngularJS) while using the latter syntax. :)
Simply change your script to use the correct version and you should be good to go.
https://angularjs.org/
Just use the AngularJs script instead of Angular Script in your script like this
<script src="https://code.angularjs.org/1.6.7/angular.js"></script>
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']);
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 use IntelliJ IDEA 13.1.6. I try to compile a simple angular app. I make a new project - Static web.
I just make 2 files - hello.html and controller.js.
hello.html:
<html ng-app>
<head>
<script src="angular.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
controller.js:
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
Right click on hello.html and Debug hello.html - or Open in Browser - Chrome and it shows {{greeting.text}}, World.
I installed in File - Settings - Plugins - AngularJS and NodeJS, also installed in Settings - Javascript - Libraries - AngularJS - pointing to the folder where I downloaded and unzipped the AngularJS.
What to do to see the "Hello World" in my browser?
Thanks!
It looks like you aren't creating a module with your app's name, and then you aren't registering your controller as an angular controller.
<html ng-app> Isn't doing anything without <html ng-app="myApp">.
myApp is the module that angular will look for when it is loaded. Once it finds that module it will look for anything else that it should register for that module.
Here is a working fiddle for what you're trying to do: https://jsfiddle.net/gf1fa3sx/
The jist is that you need to declare your angular app with angular.module('myApp', []); before angular knows anything about what it should be doing. Then you need to declare your controller on that module with:
angular.module('myApp')
.controller('HelloController', ['$scope',function($scope){
//doStuff
}]);
I hope this helps!
you're missing Angular Library.
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js
Good luck.
The solution is:
hello.html:
<html ng-app="myApp">
<head>
<script src="angular.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
controller.js:
var app = angular.module("myApp", []);
app.controller("HelloController", function($scope) {
$scope.greeting = { text: 'Hello' };
});
Thanks for your answers! hope my book won't put me in difficulties again :)