AugularJS从入门到实践(必看篇)


Posted in Javascript onJuly 10, 2017

前 言

前端

AngularJS是为了克服HTML在构建应用上的不足而设计的。(引用百度百科)

AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构,让浏览器能够识别新的语法。(引用百度百科)

例如:

使用双大括号{{}}语法进行数据绑定;

使用DOM控制结构来实现迭代或者隐藏DOM片段;

支持表单和表单的验证;

能将逻辑代码关联到相关的DOM元素上;

能将HTML分组成可重用的组件。

本篇学习主要有两个部分:

①【AngularJS 常用指令】

②【AngularJS 的 mvc 】
 

1、AngularJS 常用指令

【常用指令】

1.na-app:声明angularjs所管辖的区域,一般写在body或者HTML上原则一个一面只写一个

<body ng-app=""> </body>

2.ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

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

3.ng-bind 指令把应用程序数据绑定到 HTML 视图。

①<div id="div" ng-bind="name"></div>
②<div>{{name}}</div>

4.ng-init 指令初始化 AngularJS 应用程序变量。

<body ng-app="" ng-init="name=123"></body>

5.表达式:{{}}绑定表达式,可以包含数字、运算符和变量。但表达式在网页加载瞬间会看到{{}},所以可以用ng-bind=”代替

{{5+""+5+',Angular'}}

【基本感念】

指令:AngularJS中,通过扩展HTML的属性提供功能 ↓↓↓↓(菜鸟教程中的原话)

AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

2、AngularJS 的 mvc

【mvc三层框架】

1、 Model(模型):应用程序中处于处理属性局的部分。(保存或修改数据到数据库、变量等)。AugularJS中的Model特征的是:数据

view(视图):用户看到的而用于显示数据的页面

controller(控制器):应用程序中处理用户交互的部分。负责从视图读取数据,控制用户输入,并项目性发送数据。

2、工作原理:用户从视图层发送请求,controller接收到请求后转发给对应的model处理,medle处理完成后返回结果给controller,并在view成反馈给用户。

创建一个angular模块,即ng-app所绑定的部分,需要传递两个参数:

① 模块名称,即ng-app所需要绑定的名称。ng-app="myApp";

② 数组:需要注入的模块名称,不需要可为空。

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

在Angular模块上,创建一个控制器Controller,需要传递两个参数称。

① ng-controller="myCtrl"

② controller的构造函数:构造函数可以传入多个参数,包括$scope/$roatScope以及各种系统内置对象

【angularJS中的作用域】

①$scope:局部作用域,声明在$scope上的属性和方法,只能在当前Controller中使用;

②$rootScope:根作用域,声明在$rootscope上的熟悉感和方法可以在ng-app所包含的任何区域使用(无论是否同意controller,或是否在controller包含范围中)。

>>> 若没有使用$scope 声明变量,而直接在html中使用ng-model绑定的变量作用域为:

1.如果ng-model在某个ng-controller中,则此变量会默认绑定到当前Controller的$scope上

2.如果ng-model没有在任何一个ng-controller中,则此变量将绑定在$rootScope上。

效果图如下:

AugularJS从入门到实践(必看篇)

代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      .div1{
        width: 300px;
        height: 100px;
        background-color: #00BFFF;
      }
    </style>
  </head>
  <body ng-app="myApp">
    <div ng-controller="myCtrl">
      <input type="text" ng-model="name"/>
      <div ng-bind="name" class="div1"></div>
      <div ng-bind="age" class="div1"></div>
      <div ng-bind="classes" class="div1"></div>
      <div ng-bind="classes.name" class="div1"></div>
      <div ng-bind="classes.age" class="div1"></div>
      <div ng-bind="classes.sex" class="div1"></div>
      
    </div>
    <div ng-controller="myCtrl1">
      <input type="text" ng-model="name"/>
      <div ng-bind="name" class="div1"></div>
      <div ng-bind="age" class="div1"></div>
    
    </div>
      
  </body>
  <script language="JavaScript" src="angular-1.5.6/angular.js"></script>
  <script type="text/javascript">
    var app = angular.module("myApp",[]);  
    app.controller("myCtrl",function($scope){
      $scope.name = "帅哥" ;
      $scope.age = "18岁";
      $scope.classes = {
          name:"张三",
          age:"16岁",
          sex:"男"
        
      };
      
    });
    
    app.controller("myCtrl1",function($rootScope){
      $rootScope.name = "hahaha" ;
          });
    
  </script>
</html>

以上这篇AugularJS从入门到实践(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
js实现select下拉框选择
Jan 11 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 Javascript
解决vue scoped scss 无效的问题
Sep 04 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 #Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 #Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 #Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 #Javascript
vue子父组件通信的实现代码
Jul 09 #Javascript
vue2中filter()的实现代码
Jul 09 #Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 #Javascript
You might like
需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
详解Document.Cookie
2015/12/25 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
详解Django通用视图中的函数包装
2015/07/21 Python
python制作花瓣网美女图片爬虫
2015/10/28 Python
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
python多进程并行代码实例
2019/09/30 Python
Python内置类型性能分析过程实例
2020/01/29 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
安全教育感言
2014/03/04 职场文书
监督检查工作方案
2014/05/28 职场文书
学校读书活动总结
2014/06/30 职场文书
旷工检讨书大全
2015/08/15 职场文书
表扬信范文
2019/04/22 职场文书
golang日志包logger的用法详解
2021/05/05 Golang
redis三种高可用方式部署的实现
2021/05/11 Redis
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python