第一眼——AngularJS

I_Am 发布于2019-08-20 12:19 / 2766人阅读

摘要：在这样的背景下，诞生了，它是一种模式的前端框架，为前后端的数据绑定提供了一套解决方案，并自定义了一套事件标准，使得前后端的数据交互更加的合理化并且高效，利于管理。使得这个强大的框架终于将虚掩的门打开。第二眼，就一探究竟吧。

AngularJS是个啥？

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

为什么要使用AngularJS

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

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

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

构建第一个AngularJS应用

下载AngularJS
与大部分框架一样，AngularJS有开发版（可读）和压缩版（不可读，用于生产环境），这里我们下载AngularJS的压缩版

https://angularjs.org/
由于目前大部分应用尚未进行Angular2改造，因此这里使用第一代Angular，之后再对Angular2渐进增强

引入AngularJS

初始化Angular应用管理边界
给元素加上一个属性ng-app（其实是Angular定义的指令，它声明一个angu的管理边界）

调用Angular对象，管理ng-app

angular.module("app",[])//数组代表依赖注入的内容

AngularJS将所有api封装到angular对象中

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

在管理区域内加入内容


    {{ "This is your first Angular App!" }}

Angular将页面中所有的表达式进行解析，并输出里面的内容

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

基本指令

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

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

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


    {{ username }}

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


    {{ user.username }}
    

    {{ user.sayHello }}
    

    今天是星期{{ data[2] }}

动态数据模型——ng-model
它接收页面上动态数据的变化


    
    监听到输入框的变化{{ text }}

数据绑定——ng-bind
将数据绑定到当前元素


    
         {{ username }}

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

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

遍历——ng-repeat


    {{ $item }}

遍历datalist，根据遍历的情况生成元素，并且可以在元素中使用遍历到的数据 控制器 controller

既然Angular是MVC模式的框架，那么一定有一个controller（C）层面

控制器的作用：

监听页面中的请求和行为

访问处理数据

将数据同步到view

控制器关注的部分

view

css

image

html

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

控制器实现步骤：

声明控制器

通过应用边界管理模块去监听控制器

//在模块
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:


    
    I"m wating for message.
    

    {{ message }}

js:

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

第一眼，我们看到了：
AngularJS的核心业务（优势，解决的问题）、使用方式、编程模式（MVC）、基本的数据交互。使得这个强大的框架终于将虚掩的门打开。
第二眼，就一探究竟吧。

云服务器 GPU云服务器第一眼 AngularJS angularjs cdn cdn angularjs

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80910.html

《Build your own AngularJS》手记

摘要：最近在看，打算跟着书中的代码敲一遍，加深对的理解。在这里记录过程中的问题与心得。根据排查内存耗尽应该是这个版本的问题，换成后问题消失。因此认为这种写法是有风险的，必须用顶上那一行注释表明我确实要全局都的才行。不得不感叹的严谨。最近在看 build your own angularjs ，打算跟着书中的代码敲一遍，加深对AngularJS的理解。在这里记录过程中的问题与心得。 Int...

zsy888 2019-08-21 10:27 评论0 收藏0
客户端JavaScript框架的五大痛点

摘要：客户端框架的个痛点我们早知道会面临很多的困难，但是不知道会有这么难。这是对的，但是总体上来说，客户端框架降低了迟缓的开销。但是，这些问题加在一起就是另一回事了，可以说，客户端框架成为了我们开发工作的一大负担。更新：本文原本的标题是为何我们弃用AngularJS：……，现在把它去掉了。因为这些痛点主要是针对单页JS应用框架的。有些人认为本文是专门批判AngularJS的，这可不是我的...

jsdt 2019-08-21 12:12 评论0 收藏0
Angular 4 简单入门笔记

摘要：首先，我们需要在入口页面的中配置根路径然后创建一个路由模块路由配置在主模块中导入配置好的路由模块而在页面中需要一个容器去承载上面代码中的定义了用户点击后的路由跳转，定义该路由激活时的样式类。刚实习的时候用过AngularJS，那时候真的是连原生JavaScript都不会写，依样画葫芦做了几个管理后台。然后突然换项目了，AngularJS就不写了，感觉前前后后接触了一年多的Angula...

whlong 2019-08-20 17:44 评论0 收藏0
自己动手实现一个 Flex 布局框架

摘要：通过加对应的调整布局。这些类实际是通过使用选择器为当前元素增加了左侧的边距。简单说两种模式属性为代表的框架自定义属性为代表的框架我个人认为过多导致布局和样式混在一起不好分辨，后期维护较困难，决定采用框架的设计模式。 showImg(https://segmentfault.com/img/bVEeOl?w=1200&h=500); 本文作为 Flex 布局进阶，不对基础做详细介绍，关于...

davidac 2019-08-29 11:26 评论0 收藏0
AngularJS简述

流行框架简介 angularjs是一款非常优秀的前端高级JS框架，由谷歌团队开发维护，能够快速构建单页web应用，化繁为简无论是angularjs还是jQuery都是用原生JS封装的库：对代码进行封装，调用封装的方法，简化操作传统方式是用get方式获取元素，然后点方法 jQuery库实现了对获取方式的封装，对方法的封装框架：提供代码书写规则，按照规则去写代码，框架会帮我们实现响应的功能...

Jason 2019-08-23 11:25 评论0 收藏0