李锋涛

石看纹理山看脉,人看志气树看材

  • 主页
所有文章 友链 关于我

李锋涛

石看纹理山看脉,人看志气树看材

  • 主页

AngularJs简介与学习(一)

2017-04-09

Angular 和jQuery的区别?

1 jQuery 相比我们angular jQuery 算一个类库,jQuery 特点是以dom 操作为核心 ,大部分操作操作。
2 AngularJS则一个框架(诸多类库的集合),以数据和逻辑做为驱动(核心)。

AngularJS有着诸多特性,那些功能?

1 模块化 angular 里面都是以模块化进行管理.好处:最大限度的重用,提供代码的重用性(项目下面可以分为很多的模块,模块下面可以分为很多的小的功能,功能里面对应很多的函数。函数里面肯定是业务逻辑实现.)
2 双向数据绑定
3 语义化标签 
( html 有自带的标签,angular扩展了一些标签,这些标签可以做业务逻辑处理)
4 依赖注入

什么是mvc 模式?

mvc 模式,它只是软件设计的一种模式。
 m 代表的model 代表的模型,就是数据,读取,设置数据。
v 代表的就是视图,展示数据的部分,页面的html 标签
c 代表的控制,起的衔接作用,m 型的数据要到那个视图上面展示。

怎样创建一个简单的页面的angular的mvc的层次结构?

 1:ng-app 定义应用
2:var App=angular.module("app",[]);
3: 要将视图跟控制进行关联 ng-controller
4: 要将模型跟控制器关联 把它理解成模型,名字必须是$scope
    App.controller("xxController",["$scope",function($scope){

    }]);

angular 的指令

    ng-if   控制元素是否“存在”,true存在、false不存在
ng-show 控制元素是否显示,true显示、false不显示
ng-hide 控制元素是否隐藏,true隐藏、false不隐藏
ng-app  指定应用根元素,至少有一个元素指定了此属性。
ng-controller   指定控制器
ng-bind  {{}}
ng-model 将视图的数据向模型进行绑定
ng-init 可以初始化模型(Model)也就是$scope。
ng-bind-template
ng-class    控制类名
ng-readonly 表单只读
ng-checked  单/复选框表单选中
ng-selected 下拉框表单选中
ng-disabled 表单禁用
ng-include  引入模板
ng-src  增强图片路径
ng-href 增强地址
ng-repeat   可以将数组或对象数据迭代到视图模板中
ng-switch   可以对数据进行筛选。
ng-switch-when
ng-click // 事件

自定义指令

var app=angular.module("app",[]);
使用directive 定义指令
app.directive("directiveName",function(){
    return {
        restrict:"用来指定指令的类型"
         (4 种类型 ECMA
          E  element  元素
          C  class  样式
          M  mark  注释
          A  attribute 属性)
          replace:true,是否替换原来的标签
          template:"<h1>hello world</h1>"里面的值一定要使用标签包含起来
          templateUrl:""。载入一个页面.
    }
    })

双向数据绑定

   1 模型的数据,流行到视图。
 $scope 里面的数据,视图里面获取 
 方法:ng-bind="" ,{{}}
2 视图的数据流向到模型,一般是表单输入。
方法: input ng-module="msg" 
(如果模型 $scope里面的数据发生了改变,angular 去更新dom里面的内容。)
ng-init 初始化模型的数据
ng-click ng-mouseover 事件处理
 (使用angular 的事件,可以直接去获取模型里面的数据.
数据处理  )
ng-repeat 去迭代数据。
赏

谢谢你请我吃糖果

  • AngularJs

扫一扫,分享到微信

微信分享二维码
数据库
AngularJs简介与学习(二)
© 2018 李锋涛
Hexo Theme Yilia by Litten
  • 所有文章
  • 友链
  • 关于我

tag:

  • AngularJs
  • css
  • css3
  • js
  • Gulp
  • html5
  • react
  • Vue
  • bootstrap
  • css 布局
  • github
  • hexo
  • git
  • html
  • jQuery
  • webpack
  • ES6
  • app
  • hexo+github

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录(注意不是yilia根目录)执行以下命令:
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置:

      jsonContent:
        meta: false
        pages: false
        posts:
          title: true
          date: true
          path: true
          text: false
          raw: false
          content: false
          slug: false
          updated: false
          comments: false
          link: false
          permalink: false
          excerpt: false
          categories: false
          tags: true
    

  • 阮一峰
很惭愧

菜鸟一枚
笔记只为自己参考学习