I'm having an issue getting started with AngularJS. I have downloaded the minified file and have it living in a JS directory along with a app.js file. Everything works until I try calling the app.js file. Then it breaks. Here's my code.
index.html
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
<title>My App</title>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app>
<h1>Intro to Data Binding</h1>
<div ng-controller="DBController">
<input type="text" ng-model="userName" />
<p>Hello, {{userName}}.</p>
</div>
</body>
app.js
function DBController($scope) {
$scope.userName;
}
on your body tag do ng-app="app"
then, in your .js file...
angular.module('app', [])
.controller("DBController", function($scope){
$scope.userName = "My Name";
})
It also might be helpful to get a basic understanding of angular
the angular team provides a lot of useful videos and other resources
https://docs.angularjs.org/misc/started
Free Video Tutorials: https://www.codeschool.com/courses/shaping-up-with-angular-js
Related
I integrate an angularjs app in my CRM 365 as a web ressource type HTML then i add the Canuular controller as a web ressource type javascript and add his dependency in my html view the issue is that my controller isn't loded
is there a specifiq configuration in CRM for angularjs developpment
there is my code HTML:
<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
**<script src="tit_releveDeCompteurPourTableauDeBordAngularController" type="text/javascript"></script>**
<script src="tit_releveDeCompteurPourTableauDeBordAnularService" type="text/javascript"></script>
<title>titleTest</title>
</head>
<body ng-controller="TestController">
<div class="container" style="font-family: undefined;">
<h1>xxxxxxxxx</h1>
</div>
</body></html>
and my controller is like bellow :
var app = angular.module('demoApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
app.controller('TestController',['$scope', 'serviceFactory', function ($scope, serviceFactory) {
debugger;
alert("TestController");
$scope.name = "nametest";
}]);
You have not defined an ng-app in your html.
Please add ng-app to your body or div or ... like this:
<body ng-app="ngAppDemo">
ng-app tells angular where it should be active on your page.
My Simple Angular JS app isn't working. Can anybody help me out, the following is the code. Index.js is the main file which includes a script file controller.js .
The browser does not shows any errors when I try to run the app:
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.name="Angad";
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>Welcome</title>
</head>
<body ng-controller="myCtrl">
<nav>Navigation</nav>
<div ng-controller="myCtrl">
<input type="text" ng-model="name">
<h1>{{name}}</h1>
</div>
<footer>Copyright-2017</footer>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
it is due to script loading statement
change
<script src="js/angular.min.js" />
<script src="js/controller.js" />
with
<script src="js/angular.min.js"></script>
<script src="js/controller.js"></script>
Simple Angularjs app works without a webserver.
Your example will also work.
Just close the script tag properly.
<script src="js/angular.min.js"></script>
<script src="js/controller.js"></script>
Im learning about AngularJS but I have a problem with the "ng-hide" directive, its doesnt work.
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prueba ng-hide/ng-show</title>
</head>
<body>
<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>
</body>
And this is my script for Angular
http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js (of course, between "script" tags)
You need to initialize your application.
Add ng-app to your html
<html ng-app="MyApp">
...
Then create your app module
<script>
var app = angular.module("MyApp", []);
</script>
You aren't bootstrapping your application.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app"> <!-- You're missing this -->
<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>
</body>
</html>
script.js
var app = angular.module('app', []); // You're also probably missing this
Plunker
Currently you haven't compiled page by angular compiler, for that you need add ng-app directive(basically it takes module name, but in sample you should do only this to make) it working.
Markup
<body ng-app="">
<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>
</body>
Demo Plunkr
Technically you should create a module and add components to that module (in enterprise world).
Jose you have to tell your page that it is an Angular app
<html lang="en" ng-app="app">
and you have to create your app in the JS file:
angular.module('app', []);
I'm just getting started with Ember. I went through the starter kit video and practice app.
Now I'm creating my own app. I can't for the life of me get it to render my about template. I keep getting "Uncaught Error: There is no route named about". Obviously, it doesn't think I have a router set up, but in the starter kit, they put in static text for their about section and were able to get it to show up without writing router extension code like:
App.AboutRoute = Ember.Route.extend({
//code would go here.
});
what am i missing? it's driving me crazy!
here's my index.html:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PickUp</title>
<link rel="stylesheet" href="assets/css/compiled.css" />
</head>
<body>
<script type="text/x-handlebars">
{{#link-to 'index'}}asdf{{/link-to}}
<nav>
<li>{{#link-to 'about'}}About{{/link-to}}</li>
</nav>
{{outlet}}
</script>
<script type="text/x-handlebars" id="about">
text
</script>
<!-- dependencies -->
<script src="assets/js/libs/jquery-2.1.3.min.js"></script>
<script src="assets/js/libs/handlebars-2.0.0.min.js"></script>
<script src="assets/js/libs/ember-1.9.1.min.js"></script>
<script src="assets/js/app.min.js"></script>
</body>
</html>
and here's my app.js code:
App = Ember.Application.create();
App.Router.map(function(){
this.resource('about');
});
the rest of the code in the starter kit example relates to post and posts routes.
any help is much appreciated, thanks!
So heres my simple angular app. When I run the html file on its own via the browser, the variable name is displayed saying "nothing". However when I integrate it into django by making a dummy view that just calls a template (see views below), no variable name is shown. The only differece is when using django I load the JS files via {% static %} . The html output is the exact same for both except the django version doesn't output the variable name. I have broken the problem down to its simplest form and can't seem to understand what's happening here.
JS files are 100% loaded in django version. Chrome console shows no errors. I originally developed a simple app in angular to integrate with my django app but I can't do anything if this simple issue stands in my way.
views.py
def home_tester(request):
return render(request, 'angular/base.html')
HTML
<!DOCTYPE html>
<html ng-app="ZeTasty">
<head>
<meta charset="UTF-8">
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="gridfilter.js" type="text/javascript"></script>
</head>
<body>
<div id="content" ng-controller="GridFilter">
{{name}}
</div>
</body>
</html>
app.js
var app = angular.module('ZeTasty',[]);
gridfilter.js
app.controller("GridFilter", function($scope){
$scope.name = 'nothing';
});
you need to add {%verbatim%} and {%endverbatim%} tag
django and angular use the same {{ and }} markers.
by hinting django with {%verbatim%}, he will ignore the {{ and }}. this will allow you to combine angular with django templates
example:
<!DOCTYPE html>
<html ng-app="ZeTasty">
<head>
<meta charset="UTF-8">
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="gridfilter.js" type="text/javascript"></script>
</head>
<body>
<!-- 'verbatim' is required in order to disable Django's template engine
so we could use Angular's syntax -->
{%verbatim%}
<div id="content" ng-controller="GridFilter">
{{name}}
</div>
{%endverbatim%}
</body>
</html>