AngularJs基本特性解析(一)

现在的前端项目中基本上都会用到angularjs框架，之前并不了解这个框架，也是因为最近接手的项目，所以打算好好的学习下它。之前都是搞pc端，现在接手的是移动端的项目，移动端UI框架用的是ionic＋vordova，没有用bootstrap，主要做的是ios+安卓的app界面，ionic这个框架也不太了解，也需要花时间好好熟悉下。angularjs学习小白一枚，欢迎大神指正。

AngularJs是什么？

简单来说，即javascript的一个框架，通过script标签添加到网页中。即我们使用angularjs时，需要引入下面的代码。

rush:js;">

name:{{"ting"+"feng"}}

number:{{5+5}}

name:{{person.name}}age:{{person.age}}

AngularJs在html中的应用

主要通过ng-directive扩展html，angularjs指令是以ng作为前缀的html属性，包含有四大特性：mvc，模块化，指令系统（directive），databinding

ng-init:该指令初始化angularjs应用程序变量。比如下面的列子：

rush:js;"> <Meta charset="utf-8">

{{value.name}},hello!

我们来看看controller的应用，即控制器，即控制器通过操作数据，将其进行绑定，展现在html页面上。

AngularJS 模块（Module） 定义了 AngularJS 应用。

AngularJS 控制器（Controller） 用于控制 AngularJS 应用。

ng-app指令定义了应用,ng-controller 定义了控制器。我们用上面的列子来看：

AngularJS模块定义应用：

rush:js;"> var myModule = angular.module("HelloAngular",[]); －－控制模板HelloAngular

angularjs控制器控制应用：

rush:js;"> myModule.controller("helloAngular",function HelloAngular($scope) { $scope.value = { name: 'jiangting' }; } ]);

了解前端mvc

关于controller特性：

1.不要试图去服用controller，一个控制器一般只负责一个小块视图

2.不要直接在controller中操作dom，这不是其职责

3.不要在controller里面做数据过滤的操作，ng有filter服务

4.不要在controller里面做数据格式化，ng有很好用的表单控件

5.controller是不会互相调用，控制器之间的交互会通过事件进行，通过 filter服务4.不要在controller里面做数据格式化，ng有很好用的表单控件5.controller是不会互相调用，控制器之间的交互会通过事件进行，通过scope进行调用

下面看下如何自定义指令系统，代码如下：

rush:js;"> <Meta charset="utf-8">

directive中，后面返回有三个参数，其中template中指所插入的html标签。现在我门自己来写一段HTML代码，看看如何将其变为angularjs的写法。

原静态HTML代码如下：

rush:js;">

• new1

  just a test page1

• new2

  just a test page2

将其改版为angularjs的写法如下：

rush:js;"> <Meta charset="utf-8">

{{new.introduce}}

以上所述是小编给大家介绍的AngularJs基本特性解析(一)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

原文地址：https://www.jb51.cc/js/47167.html