AngularJS入门

最新推荐文章于 2019-02-27 09:01:45 发布

黄连树下弹琴

最新推荐文章于 2019-02-27 09:01:45 发布

阅读量147

点赞数

本文链接：https://blog.csdn.net/qq_41232734/article/details/80014679

版权

关键点：

前端JS框架：封装了使用JS开发前端重复功能，扩展了HTML，主要用于页面操作和显示。

核心：MVC、模块化、双向数据绑定、依赖注入、语义化标签、表达式等。

双向数据绑定

引入相关js文件

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>{{username}}</div>

</div>

</body>

</html>

ng-app=””匿名应用模块，一般要写名字，便于后面初始化

ng-model:自动绑定表单元素的value的值到Angularjs内部变量中。

ng-bind:作用等同于表达式，但用法不同。一般用于绑定非表单元素，用来显示变量的。

ng-bind和{{}}区别：前者会将标签的子标签的所有内容替换为变量的内容，后者只是在当前位置显示变量的内容。

基于模块化的MVC(MVVM)

视图：主要指HTML静态页面数据标签，主要是用来显示。

模型：主要只填充视图的、逻辑处理的一些数据。比如json、变量

控制：一些js代码，编写逻辑。主要是获取模型、填充视图、从视图获取数据、填充模型。

m和vm的转换：

比如变量：

var username=”XiaoQi”;

$scope.username=username;

vm的变量其实就是绑定到全局变量$scope中属性。

页面上：{{username}}

注意：Angularjs变量在页面上不能加$scope。

如果是定时器等内部js改变了变量，那么默认情况下Angularjs不能实现双向数据的绑定显示，需要使用$.digest强制通知（刷新）

页面打开时初始化内容示例:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>{{username}}</div>

</div>

//初始化应用模块

//参数1：应用模块的名字

//参数2：使用扩展模块，这里没有

var myApp=angular.module("myApp",[]);

//初始化控制器：认为控制器绑定了一堆js

//参数1：控制器的名字

//参数2：js函数

myApp.controller("myCtrl",["$scope",function ($scope) {

//初始化变量

$scope.username="XiaoQi";

//可以写任何的js

}]);

</script>

</body>

</html>

注意：

如果定义了有名字的应用模块和控制器，那么必须使用js初始化它！

依赖注入DI

按钮事件绑定

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>Hello {{username}}</div>

</div>

//初始化应用模块

var myApp=angular.module("myApp",[]);

//初始化控制器

myApp.controller("myCtrl",["$scope",function($scope){

//初始化一个angularjs的事件

$scope.clearMsg=function(){

//清空数据

$scope.username="";

};

}]);

</script>

</body>

</html>

重复遍历

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

</tr>

<td>{{$index+1}}</td>

<td>{{product.id}}</td>

<td>{{product.name}}</td>

<td>{{product.price}}</td>

</tr>

</table>

</div>

angular.module("myApp",[])

.controller("myCtrl",["$scope",function($scope){

//json数组

$scope.products=[

{"id":1001,"name":"电视机","price":998},

{"id":1002,"name":"洗衣机","price":988898}

];

}])

</script>

</body>

</html>

product：随便写，每次遍历时的临时angularjs的对象，这里指每一个json对象。

路由机制

之前：include包含页面，只是复用页面，但复用后的页面也是整体刷新的。

通过angularjs的路由，可以实现，部分刷新，实现重复的头和尾可以不刷新。而且多视图单页面效果。

底层实现：通过html中#（锚点）来实现的。

官方例子：

写法：url+#+子路径（要在中间显示的）

引入路由模块：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

angular.module("myApp",['ngRoute'])

//angularjs的配置，在配置中配置路由内容

.config(['$routeProvider', function($routeProvider){

$routeProvider

//template中支持html标签

.when('/',{template:'这是<h1>首页页面</h1>'})

//.when('/computer',{template:'这是电脑分类页面'})

.when('/computer',{templateUrl:'computer.html'})

.when('/money',{template:'这是财务页面'})

//如果都匹配不上，则跳转到一个页面

.otherwise({redirectTo:'/'});

}]);

</script>

</body>

</html>

ng-view:用来显示路由的结果的内容

when:判断语句

template:html的结果,支持html标签

templateUrl:支持加载另外的页面

黄连树下弹琴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS入门

关键点：前端JS框架：封装了使用JS开发前端重复功能，扩展了HTML，主要用于页面操作和显示。核心：MVC、模块化、双向数据绑定、依赖注入、语义化标签、表达式等。双向数据绑定引入相关js文件&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;t...
复制链接

扫一扫