Angular入门知识点教程

AngularJS 是比较新的技术,版本 1.0 是在 2012 年发布的。

AngularJS 是由 Google 的员工 Miško Hevery 从 2009 年开始着手开发。

这是一个非常好的构想,该项目目前已由 Google 正式支持,有一个全职的开发团队继续开发和维护这个库。

看看angular中文网站:https://www.angular.cn/

Angular 应用是由组件组成的。 组件由 HTML 模板和组件类组成,组件类控制视图。下面是一个显示简单字符串的组件:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }

Angular 是一个用 HTML 和 JavaScript 或者一个可以编译成 JavaScript 的语言(例如 Dart 或者 TypeScript ),来构建客户端应用的框架。

该框架包括一系列库,有些是核心库,有些是可选库。

我们是这样写 Angular 应用的:用 Angular 扩展语法编写 HTML 模板, 用组件类管理这些模板,用服务添加应用逻辑, 用模块打包发布组件与服务。

然后,我们通过引导根模块来启动该应用。 Angular 在浏览器中接管、展现应用的内容,并根据我们提供的操作指令响应用户的交互。

~~

AngularJs核心特性 #

以下是AngularJS中最重要的核心功能:

  • 数据绑定: 模型和视图组件之间的数据自动同步。

  • 适用范围: 这些对象参考模型。它们充当控制器和视图之间的胶水。

  • 控制器: 这些Javascript函数绑定到特定的范围。

  • 服务: AngularJS配有多个内置服务,例如 $http 可作为一个XMLHttpRequest请求。这些单一对象在应用程序只实例化一次。

  • 过滤器: 从一个数组的条目中选择一个子集,并返回一个新的数组。

  • 指令: 指令是关于DOM元素标记(如元素,属性,CSS等等)。这些可以被用来创建作为新的,自定义部件的自定义HTML标签。AngularJS设有内置指令(如:ngBind,ngModel…)

  • 模板:这些符合从控制器和模型信息的呈现的视图。这些可以是单个文件(如index.html),或使用“谐音”在一个页面多个视图。

  • 路由: 它是切换视图的概念。

  • 模型视图: MVC是一个设计模式将应用划分为不同的部分(称为模型,视图和控制器),每个都有不同的职责。 AngularJS并没有传统意义上的实现MVC,而是更接近于MVVM(模型 – 视图 – 视图模型)。 AngularJS团队将它作为模型视图。

  • 深层链接: 深层链接,可以使应用程序状态进行编码在URL中而能够添加到书签。应用程序可从URL恢复到相同的状态。

  • 依赖注入: AngularJS有一个内置的依赖注入子系统,开发人员通过使应用程序从而更易于开发,理解和测试。

1.AngularJs的使用 #

1.1 安装angular #

1.1.1 通过npm进行下载 #

$ npm install angular

1.1.2 使用bower下载 #

$ bower install angular

1.2 引入angularjs #

<script src="node_modules/angular/angular.js"></script>

1.3 安装扩展程序ng-inspector #

1.4 启动angular程序 #

在指定标签上添加跟作用域

ng-app(rootScope->ngapp)

ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序

2.初识ng-model #

在ng-app下的内容都归angular所管理

2.1 数据模型的挂载 #

将ng-model生成数据模型然后挂在当前作用域上

<input type="text" ng-model="name">

2.2 实现model和view的双向绑定 #

变量和视图进行绑定,取出模型上的数据

{{name}}

3.表达式 #

3.1 表达式的组成 #

两个花括号{{}}组成,可以把数据绑定到HTML

{{name}}

3.2 表达式结果 #

用来做表达式结果

{{1+2*3}}

3.3 三元表达式 #

{{name?name:'hello zfpx'}}

4.数据绑定 #

4.1 ng-bind #

显示数据等同于{{}}

<div ng-bind="name"></div>

防止用户看到被渲染之前的样子

4.2 ng-non-bindable #

取消绑定数据

<div ng-non-bindable>{{name}}</div>

4.3 ng-bind-template #

绑定多个模板

<div ng-bind-template="{{name}} {{age}}"></div>

解决 ng-bind 中只能绑定一个的问题

5.初始化数据 #

5.1 ng-init #

ng-init在当前作用域下定义初始值。

<div ng-init="name='zfpx';age=7"></div>

多组值用分号;隔开

5.2 赋值对象和数组 #

<div ng-init="name=[{age:7},{age:8}]"></div>

通常情况下,不使用 ng-init。使用一个控制器或模块来代替它。

6.data-指令 #

data-ng-init 与 ng-init 等价

<div data-ng-init="name=[{age:7},{age:8}]"></div>
<div ng-init="name=[{age:7},{age:8}]"></div>

7.ng-repeat遍历 #

7.1 遍历对象 #

初始化对象

<div ng-init="phones={age:7,sex:2,name:'zfpx'}">
</div>

遍历对象

<div ng-init="phones={age:7,sex:2,name:'zfpx'}">
+    <div ng-repeat="(key,value) in phones">
+        {{key}}{{value}}
+    </div>
</div>

7.2 遍历数组 #

初始化数组

<div ng-init="phones=[{name:'苹果',age:7},{name:'华为',age:7},{name:'htc',age:7}]">
</div>

遍历数组

<div ng-repeat="(key,phone) in phones">
    {{key}}{{phone.name}}
</div>

7.3 嵌套循环数组 #

内部获取外部索引
方法1:

<div ng-init="phones=[{name:'苹果',type:['白色','金色','玫瑰金']},{name:'华为',type:['白色','金色']},{name:'htc',type:['玫瑰金']}]">
    <div ng-repeat="(key,phone) in phones">
        <div ng-repeat="(index,type) in phone.type">
            {{key}}{{index}}{{type}}
        </div>
    </div>
</div>

方法2:

<div ng-init="phones=[{name:'苹果',type:['白色','金色','玫瑰金']},{name:'华为',type:['白色','金色']},{name:'htc',type:['玫瑰金']}]">
    <div ng-repeat="phone in phones" ng-init="key=$index">
        <div ng-repeat="type in phone.type">
            {{key}}{{$index}}{{type}}
        </div>
    </div>
</div>

遍历数组需注意track by $index

<div ng-init="phones=['苹果','苹果','苹果']">
    <div ng-repeat="phone in phones  track by $index" >
        {{phone}}
    </div>
</div>

8.ng-click #

显示隐藏/效果

8.1 增加样式 #

<style>
    .block{
        display: block;
    }
    .none{
        display: none;
    }
</style>

8.2 增加ng-click #

<div ng-init="flag=false" ng-click="flag=!flag">
    {{!flag?'显示':'隐藏'}}
</div>
<div class=" {{flag?'block':'none'}}">content</div>

9.ng-hide/ng-show/ng-if #

9.1 ng-hide/ng-show #

简单的操作css样式

<div ng-init="flag=false" ng-click="flag=!flag">
    {{!flag?'显示':'隐藏'}}
</div>
<div ng-show="flag">content</div>

9.2 ng-if #

ng-if为false时候内部节点消失,内部指令不执行

<div ng-init="flag=false" ng-click="flag=!flag">
    {{!flag?'显示':'隐藏'}}
</div>
<div ng-if="flag">content</div>

ng-if不停的修改dom性能消耗较大,使用ng-show,ng-if与ng-repeat经常连用

9.3 ng-switch #

<input type="text" ng-model="sex">
<div ng-switch="sex">
    <p ng-switch-when="boy">boy</p>
    <p ng-switch-when="girl">girl</p>
    <p ng-switch-default>no person</p>
</div>

9.4增加class值 #

9.4.1 写法1: #

<div ng-class ="{true:'red',false:'yellow'}[isActive]"></div>

9.4.2 写法2: #

<div ng-class ="{'selected':isSelected}"></div>

9.4.3 行内样式 #

<div ng-style ="{color:'red'}"></div>

9.4.4 class使用场景 #

bootstrap导航切换

<ul class="nav nav-tabs">
  <li role="presentation" ng-click="click='Home'" ng-class="{active:click=='Home'}"><a href="">Home</a></li>
  <li role="presentation" ng-click="click='Profile'" ng-class="{active:click=='Profile'}"><a href="">Profile</a></li>
  <li role="presentation" ng-click="click='Messages'" ng-class="{active:click=='Messages'}"><a href="">Messages</a></li>
</ul>

10.引入页面 #

加载外部模板

<div ng-include="'temp.html'"></div>

11.内置过滤器 #

11.1 currency #

货币过滤器

{{100 | currency:'£' }}

11.2 lowercase & uppercase #

大小写转换过滤器

{{'abc' | uppercase }}
{{'ABC' | lowercase }}

11.3 limitTo #

限制位数

{{123456 | limitTo:5}}

11.4 number #

数字过滤器

{{1234.2345|number:2}}

11.5 json #

对象过滤器

<pre>
{{{aa:123,bb:456} | json}}
</pre>

11.6 date #

日期过滤器

{{1654325689063 | date:'yyyy-MM-dd hh:mm:ss'}}

11.7 orderBy #

排序orderBy:’字段名字’:’正反序'(true/false)

<div ng-repeat="p in phones | orderBy:'age':'reverse'">
    {{p.name}}
</div>

11.8.filter #

查询过滤器

11.8.1 查询全部值 #

<div ng-repeat="p in phones | filter:age">
    {{p.name}}
</div>

11.8.2 查询全指定字段 #

<div ng-repeat="p in phones | filter:{age:query}">">
    {{p.name}}
</div>

12.angular常用工具方法 #

12.1 uppercase&&lowercase #

var abc = angular.uppercase("aaaa");
console.log(abc);
var abc = angular.lowercase("aaaa");
console.log(abc);

12.2 equals #

var a = angular.equals(NaN,NaN);
console.log(a);

12.3 extend #

var obj = {a:123},obj1 = {b:456};
angular.extend(obj,obj1);
console.log(obj);

12.4 fromJson&&toJson #

var obj = '{"aa":123,"bb":456}';
var a =angular.fromJson(obj);
a = angular.toJson(a);
console.log(a);

12.5 copy #

var obj = {a:123},obj1 = {b:456};
angular.copy(obj,obj1);
console.log(obj1);

12.6 forEach #

var arr = [{name:1},{name:2},{name:3}];
var result = [];
angular.forEach(arr,function (item) {
    this.push(item.name);
},result);

12.7 bind #

var obj = {name:2};
function arr(who){console.log(this.name+who);}
var newArr =  angular.bind(obj,arr,1);
newArr();

AngularJS的优点

  • AngularJS提供一个非常干净和维护的方式来创造单页的应用。

  • AngularJS提供数据绑定功能在HTML中,从而给用户提供丰富和响应的体验

  • AngularJS代码可进行单元测试。

  • AngularJS使用依赖注入和利用关注点分离。

  • AngularJS提供了可重用的组件。

  • 使用AngularJS,开发人员编写更少的代码,并获得更多的功能。

  • 在AngularJS中,视图都是纯HTML页面,并用JavaScript编写控制器做业务处理。

AngularJS应用程序可以在所有主要的浏览器和智能手机,包括Android和iOS系统的手机/平板电脑上运行。

AngulaJS的缺点

虽然AngularJS自带很多优点,但我们应该考虑以下几点(缺点):

  • 不安全:因为只是JavaScript一种框架,由AngularJS编写的应用程序是不安全的。服务器端身份验证和授权是必须用来保证应用程序的安全。

  • 不可降解:如果应用程序的用户禁用JavaScript,那最后用户看到的只是基本页面,仅此而已。

AngularJS组件

AngularJS框架可分为以下三个主要部分组成:

  • ng-app : 指令定义和链接AngularJS应用程序到HTML。

  • ng-model : 指令绑定AngularJS应用数据的值到HTML输入控件。

  • ng-bind : 该指令绑定AngularJS应用程序数据到HTML标签。

AngularJS环境设置

在本章中,我们将讨论如何建立AngularJS库在Web应用程序开发中使用。我们还将简要地学习目录结构和它的内容。

打开链接https://angularjs.org/(打不开可能需要翻墙),

~~~

未经允许不得转载:WEB前端开发 » Angular入门知识点教程

赞 (0)