首页 > 代码库 > AngularJS【初体验】-01
AngularJS【初体验】-01
一、介绍
1、是前端MVC框架，由Google公司维护的。
2、特点：模块化、双向数据绑定、语义化标签、依赖注入等。
3、其实jQuery只是一个类库，并不是一个框架。类库只是一堆函数的集合体。
4、Angular是一个框架，是一堆类库的集合体。
5、jquery是以DOM为驱动的，二Angular是以数据和逻辑来驱动的（核心）。
6、与Angular类似的框架还有很多：BackBone、KnockoutJS、Vue、React等。
7、本质上也是js文件。
二、下载
1、官网
2、npm下载
3、bower下载
三、体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://www.mamicode.com/angular.js"></script>
</head>
<body ng-app>
<input type="text" ng-model="msg">
<h3>{{msg}}</h3>
</body>
</html>
四、MVC概念
1、分工明确：提高效率。将工作内容对员工进行分工。目的是可以使工作效率得到提升。（后端处理数据（Model模型），前端展示数据（View视图），前端与后端之间个协调者，叫做（Controller控制器））。
2、唯一的目的是为了提升开发效率。
3、MVVM（model view viewmodel）这个是前端的MVC，他的核心思想是一样的。MVW、MVP、MV*都是MVC的衍生版
五、模块化
1、模块化是一种思想。
2、Angularjs也是模块的方式来组织代码的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://www.mamicode.com/angular.js"></script>
</head>
<body>
<!-- 指定一个应用 （就是一堆功能的集合）（一个网站就是一个应用-->
<!-- 通过一个属性来指定一个应用 -->
<!-- ng-app属性所在标签所包含的所有子内容，都属于应用的一部分 -->
<div class="box" ng-app="App">
<!-- 通过ng-controller可以定义视图 -->
<!-- ng-controller所对应的标签所包含的所有子内容都属于视图的一部分 -->
<div ng-controller="DemoCtrl">
<h1>{{name}}</h1>
<span>{{age}}</span>
</div>
</div>
<script>
// 通过js逻辑来完成应用的具体功能
// js代码使按着模块的形式组织的
// 所以开始逻辑前需要创建模块
// Angularjs有自己的一套创建模块的方法
// 当引入Angular以后，就会提供一个全局的对象叫App。并且在此对象下提供若干方法，其中一个方法叫module，通过此方法可以创建一个模块
// 需要两个参数
// 第一个是模块名称（一般对应应用名称）,第二个参数依赖
var App=angular.module(‘App‘,[]);
// 模块是以MVC的形式来组织代码的，模块具备三个角色，分别是MVC
// 模块想要工作，需要三个角色配合起来，对三个角色进行创建
// 先创建控制器
// 模块实例下有若干方法，其中controller方法用来创建一个控制器
// 需要两个参数，第一个参数是控制器的名称（一般有含义的名词），第二个参数也是依赖
App.controller(‘DemoCtrl‘,[‘$scope‘,function($scope){
// $scope就认为是模型 M
// $scope可以认为是一个空对象
$scope.name=‘香茗‘;
$scope.age=12;
}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://www.mamicode.com/angular.js"></script>
</head>
<body>
<div class="box" ng-app="App">
<div ng-controller=‘DemoCtrl‘>
<h1>{{name}}</h1>
<span>{{age}}</span>
</div>
</div>
<script>
var App=angular.module(‘App‘,[]);
App.controller(‘DemoCtrl‘,[‘$scope‘,function($scope){
$scope.name=‘xiaoyagn‘;
$scope.age=‘123‘;
}]);
</script>
</body>
</html>
两个模块：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://www.mamicode.com/angular.js"></script>
</head>
<body>
<div class="box" ng-app="App">
<div ng-controller=‘DemoCtrl‘>
<h1>{{name}}</h1>
<span>{{age}}</span>
</div>
<div ng-controller=‘DemoCtrl2‘>
<h1>{{name}}</h1>
<span>{{age}}</span>
</div>
</div>
<script>
var App=angular.module(‘App‘,[]);
App.controller(‘DemoCtrl‘,[‘$scope‘,function($scope){
$scope.name=‘xiaoyagn‘;
$scope.age=‘123‘;
}]);
// 创建第二个控制器
App.controller(‘DemoCtrl2‘,[‘$scope‘,function($scope){
$scope.name=‘舒见佳‘;
$scope.age=‘(?ω?)(?_?) ┗( ▔, ▔ )┛‘;
}]);
</script>
</body>
</html>
遍历模块：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://www.mamicode.com/angular.js"></script>
</head>
<body ng-app="App">
<div ng-controller="DemoCtrl">
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<!-- ng-repeat用来重复输出。重复此属性所在标签所包含的所有子元素 -->
<tr ng-repeat=‘val in lst‘>
<td>{{val.name}}</td>
<td>{{val.age}}</td>
<td>{{val.gender}}</td>
</tr>
</table>
</div>
<script>
var App = angular.module(‘App‘ , []);
App.controller(‘DemoCtrl‘,[‘$scope‘ , function($scope){
$scope.lst=[
{name:‘123‘,age:50,gender:‘man‘},
{name:‘345‘,age:40,gender:‘female‘},
{name:‘567‘,age:30,gender:‘male‘}
];
}]);
</script>
</body>
</html>
六、内置指令（就是属性）
ng-app 指定应用根元素，至少有一个元素指定了此属性。
ng-controller 指定控制器
ng-show控制元素是否显示，true显示、false不显示
ng-hide控制元素是否隐藏，true隐藏、false不隐藏
ng-if控制元素是否“存在”，true存在、false不存在
ng-src增强图片路径
ng-href增强地址
ng-class控制类名
ng-include引入模板
ng-disabled表单禁用
ng-readonly表单只读
ng-checked单/复选框表单选中
ng-selected下拉框表单选中
注意：嵌套是不可以的。
prop（）和attr（）区别
- 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
- 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
js是不能主动读取本地文件的。
具体用法
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head ng-controller="DemoCtrl">
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" ng-href="http://www.mamicode.com/{{href}}">
<script src="http://www.mamicode.com/angular.js"></script>
</head>
<body >
<div class="box" ng-controller="DemoCtrl">
<ul>
<li ng-show=‘1‘>ng-show控制元素是否显示，true显示、false不显示</li>
<li ng-hide="false">ng-hide控制元素是否隐藏，true隐藏、false不隐藏</li>
<li ng-if=‘true‘>ng-if控制元素是否“存在”，true存在、false不存在</li>
<li>
ng-src增强图片路径
<img ng-src="http://www.mamicode.com/{{path}}" >
</li>
<li ng-class="{red:true, blue:true}">ng-class控制类名,属性值为true，相对应的属性名会被当成真实类名添加</li>
<li>
<input type="text" ng-disabled="false">
</li>
<li>
<input type="text" ng-readonly="true" value="http://www.mamicode.com/123">
</li>
<li>
<input type="checkbox" ng-checked="true">
</li>
<li>
<select name="" id="">
<option value="">1</option>
<option value="" ng-selected="0">2</option>
<option value="">3</option>
</select>
</li>
</ul>
</div>
<script>
var App = angular.module(‘App‘, []);
App.controller(‘DemoCtrl‘, [‘$scope‘, function ($scope) {
$scope.path = ‘9919.png‘;
$scope.href = http://www.mamicode.com/‘01.css‘;
}]);
</script>
</body>
</html>
ng-include指令：
必须在服务器下运行
ng-include 指令用于包含外部的 HTML 文件。
包含的内容将作为指定元素的子节点。
ng-include 属性的值可以是一个表达式，返回一个文件名。
默认情况下，包含的文件需要包含在同一个域名下。
属性：
filename
文件名，可以使用表达式来返回文件名。
onload
可选， 文件载入后执行的表达式。
autoscroll
可选，包含的部分是否在指定视图上可滚动。
<div ng-include="‘myFile.htm‘"></div>
七、自定义指令：核心知识点
（Vue是重点，Angular过于复杂，所有学的是弱化的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://www.mamicode.com/angular.js"></script>
</head>
<body ng-app="App">
<div class="box" ng-controller="DemoCtrl">
<ul>
<li demo></li>
<demo></demo>
</ul>
</div>
<script>
var App=angular.module(‘App‘,[]);
App.controller("DemoCtrl",[‘$scope‘,function($scope){
}]);
// directive用来定义一个指令
// 需要两个参数，第一个为指令的名称，第二个为指令的逻辑
App.directive(‘demo‘,function(){
// 这里写一个逻辑
// console.log(1);
// 必须返回一个值，可以是对象或者函数
// 对象有一定的要求
return {
// A attritube表示此指令可以通过指令来使用
// E element表示此指令可以通过标签来使用 、M是注释（ <!-- directive:demo -->使用）、C是类名
// restrict: ‘A‘,
restrict: ‘ECMA‘,
template: ‘<h1>Hello Angularjs</h1>‘,
replace: true,//li只是一个占位符
// 引入一个外部文件
templateUrl:‘07.html‘
}
});
// 上述代码定义了一个非常基本的指令，只满足了语法，其使用方法与内置指令一样
</script>
</body>
</html>
8、数据绑定：
所谓的数据绑定其实就是指的将特定的模型数据与视图位置建立一种关联关系，这种关系就是数据绑定。
单向绑定：
双向绑定：
第一种写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src= "http://www.mamicode.com/angular.js"></script>
</head>
<body ng-app=‘App‘>
<div ng-controller="DemoCtrl">
<h1>
{{name}}
</h1>
<ul>
<li ng-repeat=‘val in courses‘>{{val}}</li>
</ul>
</div>
<script>
var App=angular.module(‘App‘,[]);
App.controller(‘DemoCtrl‘,[‘$scope‘, function ($scope){
$scope.name=‘小明‘;
$scope.courses=[‘html‘,‘js‘,‘css‘];
}])
</script>
</body>
</html>
第二种写法
<!-- ng-bind 是用来实现数据绑定到模型上的指令,{{}}是ng-bind的简写模式 -->
<h1 ng-bind=‘name‘>
</h1>
<ul>
<li ng-repeat=‘val in courses‘ ng-bind=‘val‘></li>
</ul>
ng-model用来将视图数据绑定到模型上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://www.mamicode.com/angular.js"></script>
</head>
<body ng-app="App">
<div ng-controller=‘DemoCtrl‘>
<input type="text" ng-model=‘msg‘>
<h3>{{msg}}</h3>
<button ng-click="show()">点击</button>
</div>
<script>
var App=angular.module(‘App‘,[]);
App.controller(‘DemoCtrl‘,[‘$scope‘,function($scope){
$scope.show=function(){
alert($scope.msg)
}
}]);
</script>
</body>
</html>
ng-bind单向 ng-model（表单元素）双向
闪烁现象：利用ng-bind能够避免闪烁。但是不能使用两次，而{{}}可以使用多次在一个标签之中，ng-bind不建议使用。闪烁现象可以解决（只要把Angularjs拿到前面去，在闪烁标签加入ng-cloak）
<p ng-cloak></p>
通过ng-init指令也可以定义模型数据
<div ng-init="name=‘123‘;age=18"></div>
区别：简单的可以这么写
9、处理事件
placeholder占位符
ng-click="click()"
避免全局函数
ng-mouseover="over()"
ng-blur="blur()"
重复：ng-repeat
<div ng-repeat="(key,val) in list">{{key}}{{val}}</div>
<div ng-repeat="val in list">{{$index}}{{val}}</div>
找到遍历结果是否是奇数项
<div ng-repeat="val in list">{{$odd}}{{$index}}{{val}}</div>
偶数项
<div ng-repeat="val in list">{{$even}}{{$index}}{{val}}</div>
第一个
<div ng-repeat="val in list">{{$first}}{{$index}}{{val}}</div>
最后一个
<div ng-repeat="val in list">{{$last}}{{$index}}{{val}}</div>
ng-switch on="val"
ng-switch-when="html"`
AngularJS【初体验】-01
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。