[AngularJS] AngularJS系列(1) 基础篇

目录

 

一年前开始使用AngularJS(以后简称ng),如今ng已经出2了.虽说2已完全变样,但是1.x还是足够优秀。

 

什么是AngularJS?

ng是一个js框架,目前最新版本为1.5.8.

官网:https://angularjs.org/

 

下载:

Install-Package AngularJS.Core

npm install angular@1.5.8

 

为什么使用/ng特性

ng是非常少有的双向绑定框架。

特性:

  1. MV*
  2. 模块化开发
  3. 双向绑定
  4. 指令系统

 

Hello World

构建1个ng页面 非常容易

?
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html ng-app>
<head>
    <title>AngularJS</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <h1>{{model}}</h1>
    <input type="text" ng-model="model">
</body>
 
</html>

这几乎是ng最简单的hello world 页面

 

其中

ng-app ng内置指令,标记ng管理的区域

{{model}} 则为ng的双括号插值语法,此处输出模型model的值

ng-model ng内置指令,用来绑定具体模型

 

内置指令

在ng中:在HTML中ng-xxx的为指令

ng中包含:

  • ng-app

    • 指定ng管理区域

  • ng-init

    • 初始化

  • ng-model

    • 双向数据绑定指令

  • ng-bind

    • 绑定数据(默认会对HTML数据转义)

  • ng-cloak

    • 加载前隐藏,加载完显示(ng模块加载完会移出特性)

  • ng-repeat

    • 循环遍历（每个元素作用域上有$id $index $first $last $middle $even $odd属性与item并齐）
    • (key,value) in data track by $index

  • ng-class

    • ng-class="{red:true}" 根据对象设置class

  • ng-show / ng-hide / ng-if

    • 是否显示 / 隐藏 / 存在 （ng-if通过注释标记能还原）

  • ng-src / ng-href

    • 防止默认请求的表达式错误

  • ng-switch

    • 当大量判断逻辑的时候，减少ng-show等的使用

  • ng-checked / ng-selected / ng-readonly / ng-disabled

    • 一般可用ng-model(以上4个指令不是双向绑定，可实现全选勾选框代码)

  • ng-change / ng-copy / ng-click / ng-dblclick / ng-focus / ng-blur / ng-submit

    • ng常用事件指令

 

内置过滤器

为了对数据做一些常用的操作,ng定义了一些内置的过滤器

?
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html ng-app>
<head>
    <title>AngularJS</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-init="model=10">
    <h1>{{model | currency}}</h1>
    <input type="text" ng-model="model">
</body>
</html>

ng-init 初始化模型数据

{{model | currency}} 的currency则为货币过滤器 

  1. currency (货币处理)

    {{num | currency : '￥'}}

  2. date (日期格式化,参考代码中的DATE_FORMATS)

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

  3. filter(匹配子串)

    {{ childrenArray | filter : {name : 'i'} }} //匹配name属性中含有i的

  4. json(格式化json对象)

    {{ jsonTest | json}}

  5. limitTo(限制数组长度或字符串长度)

    {{ childrenArray | limitTo : 2 }} //将会显示数组中的前两项

  6. lowercase(小写)
  7. uppercase(大写)
  8. number(格式化数字)
  9. orderBy(排序)

 

模块化开发

在实际开发环境中,不会像上述例子中 一行js代码都不写.

在ng中,我们的代码一般在某个模块下进行开发的.

方式一：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS</title>
    <script src="Scripts/angular.min.js"></script>
</head>
<body ng-controller="HelloCtrl">
    <h1>{{model}}</h1>
    <input type="text" ng-model="model">
    <script>
        var app = angular.module('myApp', []);
        app.controller('HelloCtrl', ['$scope', function ($scope) {
            $scope.model = 'Hello World';
        }]);
    </script>
</body>
</html>

 

方式二（也可同时创建多个页面模块）：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <title>AngularJS</title>
    <script src="Scripts/angular.min.js"></script>
</head>
<body ng-controller="HelloCtrl">
    <h1>{{model}}</h1>
    <input type="text" ng-model="model">
    <button type="button" ng-click="test()">Test</button>
<script>
    var app = angular.module('myApp', []);
    app.controller('HelloCtrl', ['$scope', function ($scope) {
        $scope.model = 'Hello World';
    }]);
    angular.bootstrap(document, ['myApp']);//使用模块初始化页面
</script>
</body>
</html>

 

简单解释上面的API

  • angular.bootstrap()

    • angular.bootstrap(dom,['myApp']) 手动加载模块myApp

  • angular.module()

    • angular.module('myApp',[],cfgFn) //创建模块
    • angular.module('myApp) //获取模块

  • module.run()

    • module.run(function(){}) //相当于程序的Main方法

  • module.controller()

    • module.controller('HomeCtrl',function(){})//创建控制器
    • module.controller('HomeCtrl',['$scope',function(scope){}])//创建控制器(推荐)

 

在ng中建议将业务逻辑放在controller中执行。

 

 

本文地址:http://www.cnblogs.com/neverc/p/5903257.html

posted @   Never、C  阅读(689)  评论(1)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手