为了账号安全,请及时绑定邮箱和手机立即绑定

AngularJS实战

难度高级
时长 7小时13分
学习人数
综合评分9.57
303人评价 查看评价
9.9 内容实用
9.5 简洁易懂
9.3 逻辑清晰
    1. 双向数据绑定提升用户体验技巧

      a.首页使用ng-bind命令

      b.后续页面使用{{}}进行绑定

    2. Zen Coding编码技巧(SublineText,扩展webstorm/VS Code类似技能)

    3. BootStrap中文网 (全局CSS样式菜单)https://v3.bootcss.com/css/

    查看全部
  • $scope是有事件机制的,他是整个AngularJs的基础

    查看全部
    0 采集 收起 来源:MVC(3)

    2018-11-07

  • //$rootScope 根作用域


    查看全部
    0 采集 收起 来源:MVC(3)

    2018-11-07

  • 1.ng官方推荐的模块切分方式

    https://img1.sycdn.imooc.com//5be2b2c90001b3c808440589.jpg

    2.一切都是从模块开始

    https://img1.sycdn.imooc.com//5be2b336000178cf09210593.jpg

    3.ng依赖注入 

    notice:ng本身部提供amd方式,可使用requireJS集成

    https://img1.sycdn.imooc.com//5be2b39400016c0f09300675.jpg


    使用方法:module定义中第二个参数(数组中)指定依赖的模块

    https://img1.sycdn.imooc.com//5be2b3e00001402c09330674.jpg




    查看全部
  • 5.$scope解析

    【chrome $scope调试工具:Inspect Angular Scope】

    https://img1.sycdn.imooc.com//5be1a2430001e5cf16181066.jpg

    https://img1.sycdn.imooc.com//5be1a306000187e716061141.jpg

    避坑:别将元素用$符号开始。

    6.$scope的生命周期

    https://img1.sycdn.imooc.com//5be1a34f00012e6916151108.jpg

    查看全部
    0 采集 收起 来源:MVC(3)

    2018-11-06

    1. ng-app:程序主入口(注意页面级别/应用级别设计),此标签嵌套的html标签内所有指令都会被angular系统编译、解析、渲染

    2. angular的mvc是借助于$scope实现的(树形结构)

    3. angular常用命令 ng-app、ng-controller、ng-repeat(item in [data1,data2,data3...] | item in items)、ng-click

      ng-repeat截取代码:

      a.页面

      https://img1.sycdn.imooc.com//5be19e4a000155b914440910.jpg

    b.引用js文件【$scope是树结构的, note: $rootScope是根,js原型继承,向上查找属性机制】

    https://img1.sycdn.imooc.com//5be19e960001269d14590955.jpg


    4.angular事件机制:基于$scope

    ·1) $emit('eventName')--向上传递(针对的上下文:dom节点树结构上下级/js类继承机制,上级及同层级的都可以收到)

    ·2) $broadcast('eventName')--上下传递(同一层级及上下层级都会收到)

    代码截取:

    a.页面

    https://img1.sycdn.imooc.com//5be1a0bb000117b725601431.jpg

    b.js文件

    https://img1.sycdn.imooc.com//5be1a10200011ad115971093.jpg

    查看全部
    0 采集 收起 来源:MVC(3)

    2018-11-06

  • Controller使用的正确姿势:

    https://img1.sycdn.imooc.com//5be192ea000105c125421437.jpg

    查看全部
  • MVC姿势纠正

    错误姿势:

    https://img1.sycdn.imooc.com//5be18c510001f09d11380652.jpg

    正确姿势:

    https://img1.sycdn.imooc.com//5be18c6d0001192c11350814.jpg

    查看全部
  • 前端MVC的困难https://img1.sycdn.imooc.com//5be1642d0001186c08020456.jpg

    查看全部
    0 采集 收起 来源:MVC(1)

    2018-11-06

  • 前端开发工具汇总

     

    spacer.gif 

     

    0. PowerCmd下载 可以不需要这个cmd命令即可 此工具无法设置node -v命令生效故而放弃

     

    1. nodejs 【多数前端工具以此为基础,比如前端打包工具webpack】

    npm命令

    比如 npm install grunt

     

    2. protractor 前端自动测试工具

     

    3.Subline Text 源代码编辑工具

    快捷代码生成键

    快速生成10个div 此命令

    Step1:输入如下命令

    spacer.gif 

     

     

    Step2:再加 Ctrl+E

    spacer.gif 

     

    4. webstorm 源代码编辑工具

    JetBrain公司产品,也可考虑使用微软的Visual Studio Code 】

    【安装包及破击,本机安装2018.02 案例中2017同样适用于2018.02】

    【破解案例地址 https://blog.csdn.net/pcent/article/details/79800355 

    或者https://blog.csdn.net/vchen_hao/article/details/77248053 】

    spacer.gif 

    PS: Webstorm安装插件 file-->settings -->Plugins-->AngularJS

     

     

     

    5.断点调试工具 chrome+插件Batarang

    chrome://extensions/

     

    6.源代码版本管理工具  DS暂时不考虑此利器

    a. git 【命令工具】

    b. TortoiseGit 【图形工具】

     

    7. Grunt   【基于NodeJS前端源代码编译工具】  【类似webpack】

    【非必须安装,Angular已集成webpack】

    慕课网课程: 1-5 开发、调试、测试工具(3)

    npm install grunt 【不建议使用全局命令npm install -g grunt】

    Api地址:

    www.gruntjs.org/docs/sample-gruntfile.html --国外网站访问不了

    https://www.gruntjs.net/installing-grunt --访问这个地址可打开

    spacer.gif 

     

    相关插件【点击 Gruntfile范例菜单 搜索命令安装相关插件 如下标志插件】

     

    grunt-contrib-uglify 用于对代码进行 混淆压缩文件

    grunt-contrib-qunit

    grunt-contrib-contact 用于对代码进行 合并文件

    grunt-contrib-jshint

    grunt-contrib-watch 用于对代码进行 监控文件变化: 进行编译输出等操作

     

    项目实例

    编译文件1) --> 3)

    1).package.json 用于npm读取依赖库

    spacer.gif 

    2).Gruntfile.js用于grunt配置

     

    spacer.gif 

    3) .grunt watch 命令 监听文件并编译

    spacer.gif 

     

    spacer.gif 

     

    spacer.gif 

    压缩文件

    4).

    spacer.gif 

     

     

    8.Bower 【非必须安装,Angular已集成webpack】【课程老师

    不建议使用】

    【Twitter公司出品,前端依赖打包工具:自动安装依赖组件、组件之间的依赖检测、版本兼容自动检测】

    spacer.gif 

     

     

     

    9.npm install http-server 安装 【非必须安装】【服务寄宿运行】 【DS可选】

    spacer.gif 

     

    10. Karma  单元测试runner 【非必须安装】

    npm install -g karma

    spacer.gif 

     

    11. Jasmine 单元测试工具 【非必须安装】 【DS可选】

    npm install -g jasmine

     

    spacer.gif 

    spacer.gif 

     

    12. Protractor  【专门为Angular定制的测试工具】 【DS可选】

    spacer.gif 

     

    npm start

    +

    npm run protractor

     

     


    查看全部
  • control注意使用项
    查看全部
  • 对于通用的东西我们用service去实现
    查看全部
  • $templateCache
    app.run(function($templateCache){
        $templateCache.put("hello.html","<div>hello everyone!!!!</div>>")
    });
    app.directive("hello",function($templateCache){
        return{
            restrict:'A',
            template:$templateCache.get("hello.html"),
            replace:true
        }
    });


    查看全部
    0 采集 收起 来源:指令(2)

    2018-11-01

  • E:<hello></hello>
    A:<div hello></div>
    C:<div class="hello"></div>
    M:<!-- directive:hello -->(这里注意要有两个空格不可少)
       <div></div>

    匹配模式一共有四个选项:AEMC

    A:属性 attribute(默认)

    E:元素 element

    M:注释 comment

    C:样式 class


    transclude---重要的配置项

    也就是说把指令内部的嵌套内容放入到<div ng-transclude></div>中

    查看全部
    0 采集 收起 来源:指令(2)

    2018-11-01

  • angular1.3版本,可以不看。
    查看全部
    0 采集 收起 来源:MVC(3)

    2018-10-02

举报

0/150
提交
取消
课程须知
你需要有较强前端基础:JavaScript基础非常扎实(BOM、DOM、事件系统、原型、作用域、闭包),并已熟悉jQuery、同时对CSS基础有一定了解;对依赖注入、MVC等常见的技术和设计模式有所了解。请注意,AngularJS框架的设计思想非常前卫,因此本教程不适合新手。
老师告诉你能学到什么?
掌握AngularJS用法、理解AngularJS核心概念、使用AngularJS进行开发

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!