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>
Related
I am using the following version of Angularjs and trying to bind property called Description, that containing html tags, with my template.
I tried to use
{{Description | unsafe}} -- rendering html as string
ng-bind-html-unsafe -- nothing rendering
ng-bind-html -- nothing rendering
Files:
<script src="https://storage.googleapis.com/vendortoolkit/Scripts/angular.min.js"></script>
<script src="https://storage.googleapis.com/vendortoolkit/Scripts/angular-route.js"></script>
How html string can be rendered as html?
Make use of $sce service. Inject $sce to your controller & then use trustAsHtml method. In controller add code as:
$scope.desc = $sce.trustAsHtml($scope.Description);
Where $scope.Description is a string containing html tags
Then, bind on template with ng-bind-html :
<div ng-bind-html="desc"></div>
For ng-bind-html to work as expected, you need to include angular-sanitize library and ngSanitize as a dependency injection.
Sharing here an example for the same. Hope, this helps.
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.myText = "My name is: <h1>John Doe</h1>";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="myText"></p>
</div>
I am currently working on a Node project using Express and ejs as view engine.
Now, for some purposes, I want to put some Angularjs on the project but I encountered some issues.
None of the scripts I write on the Angularjs controller are executed though they are correctly loaded.
For example, I initiate the angular module like so in a file app.js
angular.module('myApp', [])
.controller('MainController', MainController);
then I load it in a rendered ejs file index.ejs
<body ng-app="myApp">
<div>{{ variable }}</div>
<script src="/public/js/angular.min.js"></script>
<script src="/public/modules/part.js"></script>
<script scr="/public/modules/app.js"></script>
</body>
where /public is a the static directory for serving static files and part.js the file containing the MainController defined as following
var MainController = function($scope) {
$scope.variable = 'text';
console.log('other text');
}
When the page is completely loaded, nothing in the console and the {{ variable }} isn't interpreted.
So what have I done wrong?
You need to add ng-controller="MainController" as well,
<body ng-app="myApp" ng-controller="MainController">
<div>{{ variable }}</div>
</body>
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 have this problem, that it would be easier for me to inject some configuration to my Angular app from html. What I'm thinking about is something like:
In HTML:
<body ng-app="MyApp" my-config="ABC">
</body>
So later I could convert it to a constant, so I can easier reuse the value across rest of the app. Something like:
angular
.module('MyApp', [])
.constant('MY_CONFIG', /** the value would become what was set in HTML */);
Would something like that be possible? Thanks for your help!
I've solved that differently. In the end of my <body>, after all js files are loaded I'm just setting the value:
<body ng-app="MyApp">
<!-- [...] -->
<script>
angular
.module('MyApp')
.constant('MY_CONFIG', 'testing.config');
</script>
</body>