专栏首页达达前端(4)Angular的开发

(4)Angular的开发

angular框架,库,是一款非常优秀的前端高级JS框架,有了这个框架就可以轻松构建SPA应用程序,通过指令宽展了HTML,通过表达式绑定数据到HTML。

轻松构建SPA应用程序,单一页面应用程序

http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html http://www.apjs.net/ http://www.angularjs.cn/ http://docs.angularjs.cn/api https://material.angularjs.org http://angular-ui.github.io/

更少的代码,实现更强劲的功能

image.png

image.png

传统方式实现加法运算

image.png

Angular实现加法运算

image.png

传统方式实现数据列表呈现

image.png

image.png

AngularJS MVC 模块化 自动化双向数据绑定 指令系统

下载 Angular.js 的包 https://github.com/angular/angular.js/releases 使用 CDN 上的 Angular.js http://apps.bdimg.com/libs/angular.js/1.4.9/angular.min.js 使用 Bower 安装 bower install angular 使用 NPM 安装 npm install angular

创建一个新的HTML文件

image.png

HTML 页面中 ng-xxx 的属性称之为指令 ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序管理的边界 ng-model 指令把文本框的值绑定到变量 name 上 Angular 最大程度的减少了页面上的 DOM 操作 让 JavaScript 中专注业务逻辑的代码 通过简单的指令结合页面结构与逻辑数据 通过自定义指令实现组件化编程

我们需要本地运行 Angular 文档 下载最新的 Angular 包 MVC 是一种应用程序的开发思想 为了解决应用程序展示结构,业务逻辑之间的紧耦合关系

模型 处理数据和业务逻辑

视图 向用户展示数据

控制器 组织调度相应的处理模型

AngularJS很重要的一个特性就是实现模块化编程

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

控制器

angular.module('OneApp', [])
    .controller('HelloController', [
        '$scope',
        function($scope) {
            $scope.p = {
                name: 'zhangsan'
            };
        }
    ]);

控制器 为应用中的模型设置初始状态 通过$scope对象把数据模型或函数行为暴露给视图 监视模型的变化,做出相应的动作

// 监视购物车内容变化,计算最新结果
$scope.$watch(‘totalCart’, calculateDiscount);

scope暴露数据模型(数据,行为)

AngularJS 表达式可以包含字母,操作符,变量

ng-repeat指令用来编译一个数组重复创建当前元素

<ul class="messages">
    <li ng-repeat="item in messages track by $index">
        {{item}}
    </li>
</ul>
<ul class="messages">
    <li ng-repeat="item in messages track by $index" ng-class="{red:item.read}">
        {{item.content}}
    </li>
</ul>

ng-show/ng-hide 指令 ng-link/ng-src 指令

<!-- 浏览器在解析HTML时会去请求{{item.url}}文件 -->
<img src="{{item.url}}">
<!-- 可以使用ng-src解决该问题 -->
<img ng-src="{{item.url}}">

ng-model ng-class ng-show/ng-hide/ng-if ng-click ng-link/ng-src 过滤器(Filter) 过滤器的主要用途就是一个格式化数据的小工具, date 过滤器

<span>{{'1284893553026' | date:"MM/dd/yyyy 'at' h:mma"}}</span>

limitto 过滤器 limitto过滤器用于限制一个字符串或数组展示的长度:

<ul class="messages">
    <li ng-repeat="item in messages | limitTo:-2">
        {{item.content | limitTo:2 }}
    </li>
</ul>

filter过滤器会根据设置的检索数据过滤未匹配到的数据内容

<ul class="messages">
    <li ng-repeat="item in messages | filter:{content:123}">
        {{item.content}}
    </li>
</ul>

Form 表单 – 验证规则

必填项 required or ng-required 最小长度 minlength or ng-minlength 最大长度 maxlength 类型 type(number、email)

服务(Service)

公用(公共)的业务逻辑集中存放的一段代码

通过模块的service方法创建一个服务:

var myApp = angular.module('MyApp', []);
// 通过factory方法创建一个公用的service
var userService = myApp.service('UserService', function() {
    var users = { 1: 'zhangsan1', 2: 'zhangsan2' };
    return {
        getUser: function(id) {
            return users[id];
        },
        addUser: function(id, name) {
            users[id] = name;
        },
    };
});

$http服务是AngularJS中处理AJAX的服务

// Simple GET request example:
$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

MVC

Model(数据模型,业务逻辑) View(界面展示,展示结构) Controller(控制器,控制逻辑)

image.png

AngularJS实现了双向数据绑定


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【一起来烧脑】一步学会AngularJS系统

    AngularJS是一个JavaScript框架 一个用JavaScript编写的库

    达达前端
  • 第38节:hashCode()与toString()与equals()函数的作用,内部类和匿名内部类

    什么是对象的内容相等呢?要符合对象的内容相等需要,对象的类型相同,两个对象的成员变量的值完全相同,如何比较对象的类型相同,可以用instanceof操作符进行比...

    达达前端
  • 第二节:Java入门第一行代码

    学习Java基础课程,学会使用eclipse,eclipse为Java集成开发坏境IDE,创建第一个Java源文件代码:

    达达前端
  • Angularjs基础(十一)

    ng-csp       描述:修改内容的安全策略       实例: 修改AngularJS 中关于"eval"的行为方式及内联样式;         ...

    用户1197315
  • 走进AngularJs(二) ng模板中常用指令的使用方式

      通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的。ng的模板真...

    用户3055976
  • ng-alain安装遇到的一些坑

    一个淡定的打工菜鸟
  • angularjs中常用的ng指令介绍【转载】

    原文:http://www.cnblogs.com/lvdabao/p/3379659.html

    用户3055976
  • Angular CLI 使用教程指南参考

    Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本.

    庞小明
  • Angularjs基础(十)

    ng-blur  描述:规定blur 事件的行为       实例:当输入框失去焦点的(onblur)时执行表达式:         <input ng...

    用户1197315
  • Angularjs基础(九)

    AngularJS 应用 应用程序讲解     实例:         <html ng-app="myNoteApp">           <he...

    用户1197315

扫码关注云+社区

领取腾讯云代金券