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 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
JS+css 图片自动缩放自适应大小
Aug 08 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
node.js中的fs.rename方法使用说明
Dec 16 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 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 空格,换行,跳格使用说明
2009/12/18 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
php生成静态页面的简单示例
2014/04/17 PHP
兼容ie和firefox js关闭代码
2008/12/11 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
2019/05/08 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
python中list循环语句用法实例
2014/11/10 Python
python获取android设备的GPS信息脚本分享
2015/03/06 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
celery4+django2定时任务的实现代码
2018/12/23 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
详解python的四种内置数据结构
2019/03/19 Python
Python常用特殊方法实例总结
2019/03/22 Python
学python安装的软件总结
2019/10/12 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
护理专业自我鉴定
2014/01/30 职场文书
工商干部先进事迹
2014/05/14 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS
Android存储中最基本的文件存储方式
2022/04/30 Java/Android