AngularJS学习笔记

2024-11-30 技术教程

新项目要用AngularJS，所以抽时间看了点资料，顺便记一下

万能的Hello world

<!doctypehtml><htmllang="en"ng-app="HelloAngular"><head><metacharset="UTF-8"><scripttype="text/javascript"src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script><scripttype="text/javascript"src="module.js"></script><title>Document</title></head><body><divid=""class=""ng-controller="helloAngular"><p>`greeting`.`text`,Angular</p></div></body></html>

module.js

varmyModule=angular.module("HelloAngular",[]);myModule.controller("helloAngular",['$scope',functionHelloAngular($scope){$scope.greeting={text:'Hello'};}]);

运行效果

页面上显示 Hello, Angular

AngularJS指令

html页面

<!doctypehtml><htmllang="en"ng-app="HelloAngular"><head><metacharset="UTF-8"><scripttype="text/javascript"src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script><scripttype="text/javascript"src="module.js"></script><title>Document</title></head><body><hello></hello></body></html>

JS代码

varmyModule=angular.module("HelloAngular",[]);myModule.directive("hello",function(){return{restrict:'E',template:'<div>Hieveryone</div>',replace:true}});

运行效果：页面显示 Hi everyone

双向数据绑定

<!doctypehtml><htmllang="en"ng-app><head><metacharset="UTF-8"><scripttype="text/javascript"src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script><title>Document</title></head><body><inputng-model="greeting.text"><p>`greeting`.`text`,AngularJS</p></body></html>