手记

第一眼—— AngularJS

AngularJS是个啥?

诞生于2009年,2012年被google收购,是一个适用于CRUD、SPA等类型应用的前端MVC框架

为什么要使用AngularJS

  • 在涉及数据绑定的操作过程中,经典的做法是用AJAX将数据从服务端取回,接着将数据解析成变量,然后在前端进行字符串的拼接、嵌套,再插入到页面。

  • 低数据量的绑定这样的操作的确无可厚非,但是在数据量庞大的时候(比如需要拼接成百上千行的字符串),这种方式就显得难以执行且不太科学了。

  • 在这样的背景下,AngularJS诞生了,它是一种MVC模式的前端框架,为前后端的数据绑定提供了一套解决方案,并自定义了一套事件标准,使得前后端的数据交互更加的合理化并且高效,利于管理。


构建第一个AngularJS应用

  • 下载AngularJS
    与大部分框架一样,AngularJS有开发版(可读)和压缩版(不可读,用于生产环境),这里我们下载AngularJS的压缩版
    https://angularjs.org/
    由于目前大部分应用尚未进行Angular2改造,因此这里使用第一代Angular,之后再对Angular2渐进增强

  • 引入AngularJS

<script src="./lib/angular.min.js"></script>
  • 初始化Angular应用管理边界
    给元素加上一个属性ng-app(其实是Angular定义的指令,它声明一个angu的管理边界)

<div ng-app="app"></div><!--此div现在受到AngularJS约束-->
  • 调用Angular对象,管理ng-app

angular.module('app',[])//数组代表依赖注入的内容
  • AngularJS将所有api封装到angular对象中

  • 使用angular对象管理边界的时候,要先声明一个angular模块,对这个模块的操作,即是对管理边界的控制

  • 在管理区域内加入内容

<div ng-app="app">
    {{ 'This is your first Angular App!' }}</div>
  • Angular将页面中所有的表达式进行解析,并输出里面的内容

  • Angular不需要在js中声明边界管理模块也可以在页面显示内容


基本指令

指令:带有特定功能的自定义属性
指令格式:ng-command
基本指令

  • 初始化应用管理边界——ng-app
    定义Angular的应用管理边界,前面已经使用到

  • 初始化数据指令——ng-init
    定义初始化的数据

<div ng-app="app" ng-init="username='Hello U!'">
    {{ username }}</div>

这个数据可以是除函数外的任意的js数据类型

<div ng-app="app" ng-init="user={ username: 'Samuel', sayHello: 'Samuel say hello to you!' }; date=[1,2,3,4,5,6,7]">
    {{ user.username }}    <br>
    {{ user.sayHello }}    <br>
    今天是星期{{ data[2] }}</div>
  • 动态数据模型——ng-model
    它接收页面上动态数据的变化

<div ng-app="app">    <input ng-model="text" />
    <span>监听到输入框的变化{{ text }}</span></div>
  • 数据绑定——ng-bind
    将数据绑定到当前元素

<div ng-app="app" ng-init="username='Samuel'">
    <span ng-bind:"username">
         {{ username }}    </span></div>

它与花括号表达式不同,它只能将数据绑定到html内容中(类似innerHTML实现),而花括号表达式可以将数据绑定到任何地方

<div ng-app="app" ng-init="username='Samuel'>
    <p id="{{ username }}"></p></div>

PS:ng-model也能实现数据的捆绑,但破坏了规范的分工机制,不提倡

  • 遍历——ng-repeat

<div ng-app="app" ng-init="datalist=[1,2,3,4]">
    <p ng-repeat="$item in datalist">{{ $item }}</p></div>

遍历datalist,根据遍历的情况生成元素,并且可以在元素中使用遍历到的数据

控制器 controller

既然Angular是MVC模式的框架,那么一定有一个controller(C)层面

控制器的作用:

  1. 监听页面中的请求和行为

  2. 访问处理数据

  3. 将数据同步到view

控制器关注的部分

  • view

  • css

  • image

  • html

  • js

插个楼!——$scope
$scope是angular对象内置服务对象,关联当前ng-app,是ng-controller实现内部数据和事件方法绑定(可以说是托管到$scope上,并通过$scope去调用)的核心对象

控制器实现步骤:

  1. 声明控制器

<div ng-app="app" ng-controller="mycontroller"></div>
  1. 通过应用边界管理模块去监听控制器

//在模块var app = angular('app',[]).controller('mycontroller', function() {    //这里就要使用到$scope来进行数据的控制
    $scope.hostage = "I am a hostage, controlled by Samuel"
    $scope.something = "I am something."})

AngularJS事件

AngularJS自己定义了一套事件标准,通过指令的形式进行监听
示例:

  • 单击事件——ng-click
    html:

<div ng-app="app" ng-controller="mycontroller">
    <button ng-click="sendMessage()">sendMessage</button>
    <span>I'm wating for message.</span>
    <br>
    <span>{{ message }}</span></div>

js:

var app = angular.module('app', []).controller('mycontroller', function() {
    $scope.sendMessage = function() {
        $scope.message = "I\'m message!";
    }
});

第一眼,我们看到了:
AngularJS的核心业务(优势,解决的问题)、使用方式、编程模式(MVC)、基本的数据交互。使得这个强大的框架终于将虚掩的门打开。



作者:Asambojur
链接:https://www.jianshu.com/p/a1517ec1539d


0人推荐
随时随地看视频
慕课网APP