博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AngularJS第一课:Hello AngularJS
阅读量:5901 次
发布时间:2019-06-19

本文共 1515 字,大约阅读时间需要 5 分钟。

hot3.png

一.AngularJS是什么

    网上有很多解释,这里只是聊一下AngualrJS名称的由来:HTML标签中尖括号的英文是 angular brackets。源码托管地址:https://github.com/angular/angular.js

 

二.AngularJS开发环境搭建

    嗯,如果你很棒棒,可以使用记事本啦~ 不过,对于开发人员来说,选择好的开发工具可以极大的提高工作效率。一般开发AngularJS的开发工具有:WebStorm(JetBrains)、Sublime Text和Brackets(Adobe)。

    这里介绍一下Brackets工具:简约、优雅、快捷的特点,具有自动刷新浏览器、修改元素的样式后实时预览、代码搜索等强大功能。总结一句话:如果说小米是为发烧而生,辣么Brackets专为Web前端开发而生。

    Bracket和Sublime一样,有插件扩展功能:添加AngularJS Code Hints插件

   【File】->【Extension Manager】,打开插件管理面板,输入AngularJS,查询,然后在插件列表中单击【AngularJS Code Hints】插件右侧的【install】。

    BTW,Angular的官方下载地址是:https://code.angularjs.org

 

三.第一个AngularJS应用

    首先,show me the code:

Hello Angular JS
{
{"Hello Angular JS!"}}
{
{"Good good study, Day day up!"}}

    使用Bracelet实时预览:【File】->【Live Preview】:

 

四.AngularJS总结

    1.学会了AngularJS开发环境搭建,能够使用Brackets安装AngularJS插件,进行简单开发预览。

    2.ng-app指令

        ng-app 是AngularJS的一个内置指令,可以出现在任意位置,作用:

        (1)启动AngularJS框架;
        (2)告诉AngularJS框架从 ng-app 指令所在标签的开始标签到结束标签之间的所有
    DOM元素由AngularJS框架进行管理。
    通常情况下,会把 ng-app 指令放在<html>标签中,让AngularJS管理整个页面。

    3.ng-init指令:用于初始化作用域。

    4.{

{expression}}

        AngularJS的表达式形式,由两个嵌套的大括号构成,中间为表达式内容,AngularJS会

    对表达式内容进行解析,然后将结果输出到浏览器。

    5.AngularJS应用构成元素

        (1)模型:用于展示到页面的数据,本质上是一个Js对象;

        (2)视图:AngularJS指令与表达式经过解析后的DOM元素(即用户所看到的网页内容);
        (3)控制器:处理业务逻辑的Js方法;
        (4)作用域:理解为一个容器,在控制器中可以访问这个容器,然后往容器中放入一些模型数据,
        在视图中就可以通过表达式将数据展现给用户;
        (5)指令:扩展的HTML属性或标签,能够被AngularJS框架识别,根据不同的指令执行相应的动作;
        (6)表达式:用于向页面输出信息,{
{expression}};
        (7)模板:AngularJS使用HTML作为模板语言,AngularJS模板实际上就是HTML片段。

转载于:https://my.oschina.net/javamaster/blog/1632577

你可能感兴趣的文章
Apache+php+memcache集群搭建
查看>>
iftop重定向为文本
查看>>
跨站脚本***(XSS***)
查看>>
Rhel6.5_Nginx1.45_Php5.59_MySQL5.6.16编译安装(集成LNMP环境)
查看>>
left join、right join、inner join的区别
查看>>
滚动的电表
查看>>
RHEL5.4+postfix+dovecot+mysql+extmail +maildrop+Mailscanner+clama+spamassassin
查看>>
smartgit的安装
查看>>
ubuntu系统中root账户忘记密码
查看>>
UPESB跟AquaLogic 的功能对比
查看>>
五个常用MySQL图形化管理工具
查看>>
虚拟机安装与概述(1)
查看>>
使用Python一年多了,总结八个好用的Python爬虫技巧
查看>>
网页首页广告显示缓慢向上消失
查看>>
组播学习笔记(二)IGMP协议
查看>>
php程序设计经典300例,第1-5例
查看>>
清华大学:模拟电子技术基础
查看>>
Java中常用的内存区域
查看>>
傻瓜式安装基于Apache服务部署虚拟主机功能
查看>>
数组元素复制 反转 学习笔记
查看>>