New to AngularJS here (have used BackboneJS before), and am trying to learn AngularJS. I'm attempting to basically render a bunch of objects with their own div "views." In my controller, I have an array of objects (all objects with same properties) that I would pretty much like to render as sticky-notes. My thought process was to somehow grab the data from each object in the array, and render each as div's (which I could style to look like a sticky-note).
The code I have thus far:
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', '$http', function ($scope, $http, Note) {
$scope.notesArray= [];
$http.get('notes_data.json').success(function(data) { // basically grab all the data from a JSON file
data.data.forEach(function(obj) {
$scope.notesArray.push(obj);
});
})
}]);
My index.html looks like:
<!doctype html>
<html>
<head>
<title>My Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
Some stuff here
</div>
</div>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
Also, it'd be great if someone could comment on how I can represent these objects more effectively (using a factory, service, etc). Thanks!
Do something like this, with ng-repeat :
<!doctype html>
<html>
<head>
<title>My Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<div class="note" ng-repeat="note in notesArray">
<div class="wrapper" ng-class="note.done ? 'done' : 'undone'">
<p class="title">{{note.title}}</p>
<span class="done">{{note.done}}</span>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
Related
I just started AngularJS today; so I'm still very new to it. I have the following code:
<!DOCTYPE html>
<html ng-app>
<head>
<title>My first AngularJs</title>
</head>
</html>
<body data-ng-controller="SimpleController">
<div class="container">
<h3>Looping with the ng-repeat Directive</h3>
<input type="text" ng-model="nameText"/>{{ nameText}}
<ul>
<li data-ng-repeat="cust in customers | filter:nameText | orderBy:'name'">{{ cust.name | uppercase }} - {{ cust.city}}</li>
</ul>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function SimpleController($scope){
$scope.customers=[
{name:'Frank Ben',city:'Bamenda'},
{name:'Brize Tankanon',city:'Marous'},
{name:'Brendaline M.',city:'Bafoussam'},
{name:'Alexander Bings',city:'Buea'}
];
}
When I run the above code, this is what I get:
when I remove the controller directive from the body tag, I get this:
I don't know where the problem is coming from. I wish to display those names and cities. I will be grateful for your help. Thanks!
Try to register controller in angularjs app using build in dependency injection, in other words:
<script type="text/javascript">
var app = angular.module("app", []);
app.controller('SimpleController', ['$scope', function SimpleController($scope){
$scope.customers=[
{name:'Frank Ben',city:'Bamenda'},
{name:'Brize Tankanon',city:'Marous'},
{name:'Brendaline M.',city:'Bafoussam'},
{name:'Alexander Bings',city:'Buea'}
];
}]);
</script>
then change ng-app to ng-app="app".
Here is JSBin with working example: http://jsbin.com/ficozajena/1/edit?html,js,output
I am learning angular.. I tried to run a small example,but wasn't able to render correct output.Can anybody help?
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>
<body ng-app='app' ng-controller='MainController as main'>
<div class='container'>
<h1>{{ title }}</h1>
<div ng-controller='SubController as sub'>
<h2>{{sub.title}}</h2>
<p>If we were not using the <strong>ControllerAs</strong> syntax we would have a problem using title twice!</p>
</div>
</div>
</body>
</body>
</html>
app.js
angular.module('app', []);
angular.module('app').controller("MainController", function($scope){
$scope.title = 'AngularJS Nested Controller Example';
});
angular.module('app').controller("SubController", function(){
this.title = 'Sub-heading';
});
I am not able to figure out why angular variables are getting displayed as normal text instead of its assigned value. kindly help...
It looks like you are missing a link to your app.js file.
Just a tip when referencing your .js files, make sure you reference any javascript which uses Angular AFTER the line where you reference angular.js
So your references should look something like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script> <!-- this is the one you are missing -->
Please, plunkr
It works
<h1>{{main.title }}</h1>
<div ng-controller='SubController as sub'>
<h2>{{sub.title}}</h2>
<p>If we were not using the <strong>ControllerAs</strong> syntax we would have a problem using title twice!</p>
</div>
I use ng-repeat for messages in chat:
ng-bind-html="message.message + getAttachmentTemplate(message.attachment)"
How I can to cut special symbols as JS, HTML and safe from XSS atack?
But I need to display HTML inside getAttachmentTemplate
You need to include angular-sanitize.js, you can then load the ngSanitize module
angular.module('app', ['ngSanitize']);
You can then use the $sanitize service to sanitize your HTML snippets, see an example below:
angular.module('expressionsEscaping', ['ngSanitize'])
.controller('ExpressionsEscapingCtrl', function($scope, $sanitize) {
$scope.msg = 'Hello, <b>World</b>!';
$scope.safeMsg = $sanitize($scope.msg);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.angularjs.org/1.0.2/angular.js"></script>
<script src="http://code.angularjs.org/1.0.2/angular-sanitize.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="expressionsEscaping" ng-controller="ExpressionsEscapingCtrl">
<div class="container">
<h2>Angular $sanitize demo</h2>
<p ng-bind="msg"></p>
<p ng-bind-html-unsafe="msg"></p>
<p ng-bind-html="msg"></p>
<p ng-bind-html-unsafe="safeMsg"></p>
<div>Provided by <a onclick="window.open('stackoverflow.com')">Stack Overflow</a>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html ng-app="">
<head>
<link rel="stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-controller="userCtrl">
<div class="container">
<div ng-include="'myUsersList.html'"></div>
<div ng-include="'myUsersForm.html'"></div>
</div>
</body>
</html>
I have the two files 'myUserList.html' and 'myUsersForm.html' in the same folder as this index file. It is still not loading the two 'html pages' one below other. I am getting a blank page. Is anything missing???
And also don't miss to initialize model.
angular.module('MyApp', []);
EDIT: i arranged the files so the JS file is the last one.. but its still not working
The result when I open this up in firefox is simply {{message}}
I've named the files: html.html and js.js
HTML file
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="js.js", type='text/javascript'></script>
</head>
<body ng-controller="abc">
{{message}}
</body>
</html>
Javascript file
var app = angular.module('app', []);
abc.controller('abc', function($scope){
$scope.message = 'booya';
});
Your controller should be defined as:
app.controller('abc', function($scope){
$scope.message = 'booya';
});
You have mentioned abc.controller. It seems where the issue is
You need to load js.js after angularjs, which means that your should look like:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"> </script>
<script src="js.js", type='text/javascript'></script>
You dont have a body or a ngController. And you should change the order of your js files, as follows:
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="js.js", type='text/javascript'></script>
</head>
<body ng-controller="abc">
{{message}}
</body>
</html>