首页 > 代码库 > AngularJS 笔记1
AngularJS 笔记1
- 2017-03-23
- 本文更新链接： http://www.cnblogs.com/daysme
什么是 angularjs
2009年有两个外国人创建，后由谷歌收购并开源。
他的特点有MVC、模块化、双向数据绑定、语义化标签、依赖注入等。
AngularJS主要考虑的是构建CRUD应用，90%的应用都是CRUD应用，游戏，图形界面编辑器，这种DOM操作很频繁也很复杂的应用不合适他做。
CRUD(增加Create、读取Read、更新Update、删除Delete)
安装
- 引入 angular.js
- 在 html 标签上添加 ng-app=””
入门规则
- angularjs 中对数组，对象的获取方法和以前不同，数组是用下标，对象通过点(.)来获取。
ng-init 指定可以定义多个变量，每个变量由分号分开，先从标签内找变量，如果找不到，进行全局查找，都找不到也不报错。
<div>{{b}}</div>
<div ng-init="a=1;b=2;">{{a}}</div>{{}} 是双向数据绑定的一种方式，里面写的是需要得到的变量名称。这种方式叫双括号插值法。另一种方式是 ng-bind=”“ 引号里写想要的变量。建议使用 ng-bind ，避免没有被渲染的模块提前暴露在页面上。
ng-model 是把元素的值绑定相应的应用程序，和 ng-bind 合作即双向数据绑定。
- 双向数据绑定：
<input ng-model="val">
<div ng-bind="val"></div>- 双向数据绑定并设置初始值：
水：<input ng-model="a" ng-init="a=10">元/瓶<br>
数量：<input ng-model="b" ng-init="b=1"><br>
合计：<span ng-bind="a*b"></span>元ng-repeat 遍历并渲染到页面上。
<ul ng-init="aa=[1,3,5,2]">
<li ng-repeat="i in aa" ng-bind="i"></li>
</ul>ng-click 定义点击事件，以下代码点击1次加1。
<button ng-init="a=1" ng-click="a=a+1" ng-bind="a"></button>ng-hide=”true” 设置元素不可见。
ng-show=”true” 设置元素可见。
<button ng-init="a=true" ng-click="a=!a">点击</button>
<div ng-show="a">显示/隐藏</div>
控制器
- ng-controller 定义控制器。每创建一次，就会生成一个 对象，这个对象的功能负责把控制器和关联在一起，每个控制器间互不影响，scope可以像变量一样在作用域间传递和使用。
- 高版本的控制器不能直接在 js 中定义。
- ng-app=”” 静态的指令，直接启动。如果有多个，只启动第一个。如果加在某 div 上，表示这个 div 标签内有效。还有一种动态的让 angularjs 运行的方式，在 js 中写 angula.bootstrap(启动对象,导入时载入的模块)。
通过 angularjs 来控制 dom 元素，是通过 angularjs 内置的一个精简版的 jquery-jqlite ; 使他可以像 jq 一样进行 dom 操作。 jqlite 是 angular.element 提供出来的，和 jq 操作差不多，只不过不能使用 this 。并且不能直接获取 dom 元素，如果通过标签名查找的话可通过 angular.element(document).find(‘标签名‘) 查找。
以下代码没有使用 ng-app，使用的是 angular.bootstrap 动态启动 angular
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<button id="btn">点击</button>
<script src=http://www.mamicode.com/"angular1.min.js"></script>
<script>
angular.element(document).ready(function(){
var btn=document.getElementById(‘btn‘);
angular.element(btn).on(‘click‘,function(){
alert(1);
});
angular.bootstrap(btn,[]);
})
</script>
</body>
</html>控制器在 1.3.0-beta.15 以上不再支持全局的 Controller 。以下代码使用的是 1.3.0-beta.14 版本，如果使用 1.3.0-beta.15 会报错。
因为从Angular-1.3.0 beta15开始，Angular不再支持全局的Controller！<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div ng-controller="fn">
姓名：<input type="text" ng-model="aa"><br>
<input type="button" value=http://www.mamicode.com/"问候" ng-click="tap()">
<div ng-init="name" ng-bind="name"></div>
</div>
</body>
<script src=http://www.mamicode.com/"http://cdn.bootcss.com/angular.js/1.3.0-beta.14/angular.min.js"></script>
<script>
function fn($scope){
$scope.tap=function(){
$scope.name="hello"+$scope.aa
}
}
</script>
</html>使用 module 实现控制器。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<body>
<div id="bo" ng-controller="mycontroller" ng-bind="msg"></div>
<script src=http://www.mamicode.com/"angular1.min.js"></script>
<script>
var myApp=angular.module(‘aa‘,[]) //1 定义模块，注入需要的服务
var element=angular.element(document.getElementById(‘bo‘)); //获取元素
var aa=function($scope){ //2 里面发生的事，通过 $scope 控制
$scope.msg=‘hi‘;
}
myApp.controller(‘mycontroller‘,aa); //3 通过控制器调用模块
angular.bootstrap(element,[‘aa‘]); //4 运行 angular
</script>
</body>
</html>
自定义指令
- 让 html 更有语义，不需要深入研究代码和逻辑，就可知道页面的大致逻辑。
抽象一个自定义的组件，在其他地方可以重用。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<body>
<mytag ng-app="myApp"></mytag>
<script src=http://www.mamicode.com/‘angular1.min.js‘></script>
<script>
var myApp = angular.module("myApp", []);
myApp.directive("mytag", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
</html>
MD:
- 2017-03-23- 本文更新链接： http://www.cnblogs.com/daysme## 什么是 angularjs 2009年有两个外国人创建，后由谷歌收购并开源。 他的特点有MVC、模块化、双向数据绑定、语义化标签、依赖注入等。 AngularJS主要考虑的是构建CRUD应用，90%的应用都是CRUD应用，游戏，图形界面编辑器，这种DOM操作很频繁也很复杂的应用不合适他做。 *CRUD(增加Create、读取Read、更新Update、删除Delete)*## 安装- 引入 angular.js- 在 html 标签上添加 ng-app="" ## 入门规则- angularjs 中对数组，对象的获取方法和以前不同，数组是用下标，对象通过点(.)来获取。- ng-init 指定可以定义多个变量，每个变量由分号分开，先从标签内找变量，如果找不到，进行全局查找，都找不到也不报错。 ``` <div>{{b}}</div> <div ng-init="a=1;b=2;">{{a}}</div> ```- **{{}}** 是双向数据绑定的一种方式，里面写的是需要得到的变量名称。这种方式叫双括号插值法。另一种方式是 **ng-bind=""** 引号里写想要的变量。建议使用 ng-bind ，避免没有被渲染的模块提前暴露在页面上。- ng-model 是把元素的值绑定相应的应用程序，和 ng-bind 合作即双向数据绑定。 - 双向数据绑定： ``` <input ng-model="val"> <div ng-bind="val"></div> ``` - 双向数据绑定并设置初始值： ``` 水：<input ng-model="a" ng-init="a=10">元/瓶<br> 数量：<input ng-model="b" ng-init="b=1"><br> 合计：<span ng-bind="a*b"></span>元 ```- ng-repeat 遍历并渲染到页面上。 ``` <ul ng-init="aa=[1,3,5,2]"> <li ng-repeat="i in aa" ng-bind="i"></li> </ul> ```- ng-click 定义点击事件，以下代码点击1次加1。 ``` <button ng-init="a=1" ng-click="a=a+1" ng-bind="a"></button> ```- ng-hide="true" 设置元素不可见。- ng-show="true" 设置元素可见。 ``` <button ng-init="a=true" ng-click="a=!a">点击</button> <div ng-show="a">显示/隐藏</div> ```## 控制器- ng-controller 定义控制器。每创建一次，就会生成一个 $scope 对象，这个对象的功能负责把控制器和 dom 关联在一起，每个控制器间互不影响，$scope可以像变量一样在作用域间传递和使用。 - 高版本的控制器不能直接在 js 中定义。- ng-app="" 静态的指令，直接启动。如果有多个，只启动第一个。如果加在某 div 上，表示这个 div 标签内有效。还有一种动态的让 angularjs 运行的方式，在 js 中写 angula.bootstrap(启动对象,导入时载入的模块)。通过 angularjs 来控制 dom 元素，是通过 angularjs 内置的一个精简版的 jquery-jqlite ; 使他可以像 jq 一样进行 dom 操作。 jqlite 是 angular.element 提供出来的，和 jq 操作差不多，只不过不能使用 this 。并且不能直接获取 dom 元素，如果通过标签名查找的话可通过 `angular.element(document).find(‘标签名‘)` 查找。- 以下代码没有使用 ng-app，使用的是 angular.bootstrap 动态启动 angular ``` <!DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <button id="btn">点击</button> <script src="http://www.mamicode.com/angular1.min.js"></script> <script> angular.element(document).ready(function(){ var btn=document.getElementById(‘btn‘); angular.element(btn).on(‘click‘,function(){ alert(1); }); angular.bootstrap(btn,[]); }) </script> </body> </html> ```- 控制器在 1.3.0-beta.15 以上不再支持全局的 Controller 。以下代码使用的是 1.3.0-beta.14 版本，如果使用 1.3.0-beta.15 会报错。 因为从Angular-1.3.0 beta15开始，Angular不再支持全局的Controller！ ``` <!DOCTYPE html> <html ng-app=""> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div ng-controller="fn"> 姓名：<input type="text" ng-model="aa"><br> <input type="button" value="http://www.mamicode.com/问候" ng-click="tap()"> <div ng-init="name" ng-bind="name"></div> </div> </body> <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.14/angular.min.js"></script> <script> function fn($scope){ $scope.tap=function(){ $scope.name="hello"+$scope.aa } } </script> </html> ```- 使用 module 实现控制器。 ``` <!DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <body> <div id="bo" ng-controller="mycontroller" ng-bind="msg"></div> <script src="http://www.mamicode.com/angular1.min.js"></script> <script> var myApp=angular.module(‘aa‘,[]) //1 定义模块，注入需要的服务 var element=angular.element(document.getElementById(‘bo‘)); //获取元素 var aa=function($scope){ //2 里面发生的事，通过 $scope 控制 $scope.msg=‘hi‘; } myApp.controller(‘mycontroller‘,aa); //3 通过控制器调用模块 angular.bootstrap(element,[‘aa‘]); //4 运行 angular </script> </body> </html> ```## 自定义指令1. 让 html 更有语义，不需要深入研究代码和逻辑，就可知道页面的大致逻辑。2. 抽象一个自定义的组件，在其他地方可以重用。 ``` <!DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <body> <mytag ng-app="myApp"></mytag> <script src=http://www.mamicode.com/‘angular1.min.js‘></script>"myApp", []); myApp.directive("mytag", function() { return { template : "<h1>自定义指令!</h1>" }; }); </script> </body> </html> ```
AngularJS 笔记1
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。