AngularJS入门小结

最新推荐文章于 2024-04-25 18:30:40 发布

斗笔程序猿

最新推荐文章于 2024-04-25 18:30:40 发布

阅读量704

点赞数

分类专栏：跨平台APP开发文章标签： angularjs 程序开发跨平台 ios

本文链接：https://blog.csdn.net/ada19950118/article/details/50548919

版权

跨平台APP开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

说几天初学AngularJS的感受吧。一开始，公司的前辈给我一下参考资料去让我快速入门，先开始给了一个网站的链接http://www.runoob.com/ionic/ionic-tutorial.html，之前我其实不是很懂什么叫跨平台的APP开发，只是知道开发iOS不是用原生的OC或者最新的swift。后面听说ionic框架来开发的移动APP（android和iOS），可以写一套代码直接实现两个移动平台的APP开发，我当时就觉得好神奇。其他的不是不多扯把，还是说说ionic吧。我当时一打开那个网页，就看到学习ionic必须要具备HTML，CSS，Javascript，Angular。只能从HTML开始学起，因为也是初入门，学的不是很深入，个人感觉HTML还算是比较容易的，都是一些需要注意的语法结构，主要是围绕标签展开的，层次关系也是很明显的。看了很多实例，也做了一些笔记，不过都是一些基础的语法。具体如下：

 HTML实例演示http://www.runoob.com/html/html-examples.html
1.
<!doctype html>
html5标准网页声明，原先的是一串很长的字符串，现在时这个简洁形式，支持HTML5标准的主流浏览器都认识这个声明。表示网页参用HTML5，位于<html>的前面。
2.
<body>…</body> 网页中的正文
<h>…</h>表示标题
<p>…</p>表示段落
<a href=“http://www.baidu.com”>这是一个链接</a>  显示是这是一个链接，点击跳转到百度网站
<a href=“http://www.baidu.com" style="text-decoration:none;">Visit w3cschool.cc!</a>  没有下划线的链接
<a href="http://www.w3cschool.cc/" target="_blank">访问 w3cschool.cc!</a>  链接在新窗口打开
<img src=“/images/w3cshool.png” width=“300” height=“120” />   表示图片
<hr />    表示插入一行下划线
3.
<!--This is a comment. Comments are not displayed in the browser—>  表明注释
文字中换行表示空格的含义 或者 在文字中间 加入<br>  或者 <br />
即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来。
4.
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>
</address>
 表明点击Jon Doe 可以直接跳转到邮箱并且补全收件人:webmaster@example.com
<abbr title=“etcetera">etc.</abbr>   表明首字母小写
<acronym title="World Wide Web”>WWW</acronym> 表明首字母大写 
在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。
5.
<p><bdo dir="rtl">This paragraph will go right-to-left.</bdo></p>     表明倒序
6.
<q>…</q> 表明双引号之间的语句
<del>blue</del> 表明删除线
<ins>red</ins> 表明下划线
<body style=“background-color:yellow;”>…</body>   表明黄色背景色
 style=“text-align:center;”  字体居中 
7.
表格 如果不要边框，可以直接将border这部分省去 用<caption>Monthly savings</caption> 表明标题   cellpadding 表明单元格边距 cellspacing=“10"  表明单元格间距
<table border=“1”cellpadding="10">
<tr>
  <td>100</td>  注：用<th>...</th>也是可以的 表明表头
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

8.表相关的合并单元格
http://www.runoob.com/try/try.php?filename=tryhtml_table_span

9.用下面的结构
<ul>
   <li>apples</li>
    <li>bananas</li>
   <li>pineapples</li>
</ul>
表示
*apple
*bananas
*pineapples (其中的*代表·)

<ol>
  <li>coffee</li>
  <li>tea</li>
  <li>milk</li>
</ol>  表示
1.apple
2.bananas
3.pineapples

<ol start=“50”>
  <li>coffee</li>
  <li>tea</li>
  <li>milk</li>
</ol>  表示
51.apple
52.bananas
53.pineapples
还有其他格式参考：http://www.runoob.com/try/try.php?filename=tryhtml_lists_ordered
http://www.runoob.com/try/try.php?filename=tryhtml_lists_unordered

10.
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

定义列表如下：
Coffee
- black hot drink
Milk
white cold drink

<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
表示：含义文本框的列表，可以填写。创建密码区的时候需要将type的属性设置成password
<form action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>
表示复选框，可以同时选择多个选项。

<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
表示单选框。选择性别是Male还是Female.

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
表示下拉列表


<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>表示预选下拉列表。预选选项fiat.

11.文本框（多行文本输入控件）
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

12.创建了一个hellow world！的按钮
<form action="">
<input type="button" value="Hello world!">
</form>
...

还有更多的，也没有再一一记录了。

AngularJS是一个Javascript框架，它可通过script标签添加到HTML页面。AngularJS通过指令扩展了HTML，且通过表达式绑定数据到HTML。
它的四大核心特征：
1.MVC（手段；目的：模块化与复用）
为什么？
1.代码规模越来越大，切分职责是大势所趋
2.为了复用：很多逻辑是一模一样的
3.为了后期维护方便：修改一块功能不影响其他的功能

$scope是一个POJO（普通的JS对象）$ scope提供一些工具方法 $watch（）/$ apply()，观察其内部对象值得变化，不需要手动调用。
$scope是表达式的执行环境(或者说是作用域)$ scope是一个树型结构（子层标签去父层标签的属性与方法），与DOM标签相平行
$scope可以传播事件(向上向下)$ scope不仅是MVC的基础，也是后面实现双向数据绑定的基础。
可以通过angular.element( $0).scope()进行调试$ scope的生命周期
creation->watcher registration->modedl mutation->mutation observation->scope destruction

controller 如果有公共的部分，可以通过service来解决
将公共的部分抽离成service(服务)，让控制器具有这样的service.
不要在Controller里面进行DOM操作，不要进行数据格式化（ng有很好的表单功能），不要进行数据过滤操作（ng有$filter服务），不要相互调用（通过scope 或者事件交互）

代码

<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
</head>
<body>
<div ng-controller="CommonController">
<div ng-controller="Controller1">
<p>{{greeting.text}},Angular</p>
<button ng-click="test1()">test1</button>
</div>

<div ng-controller="Controller2">
<p>{{greeting.text}},Angular</p>
<button ng-click="test2()">test2</button>
</div>

<button ng-click="commonFn()">通用</button>
</div>


</body>
<script src="js/angular-1.3.0.js"></script>
<script src="HelloAngular_MVC.js"></script>
</html>


—
function ComminController($scope){
    $scope.commonFn=function(){

    alert("这里是通用功能！");
    };
}

function Controllr1($scope){
    $scpe.greeting = {
    text:'Hello1'
    };
    $scope.test1=function(){
    alert("test1");
    };
}

function Controller2($scope){
    $scope.greeting = {
     text:'Hello2'
    };
    $scope.test2=function(){
    alert("test");
}
}

demo示例:
<!doctype html>
<html ng-app>
  <head>
   <meta charset="utf-8">
  </head>
  <body>
     <div>
     <input ng-model="greeting.text"/>
     <p>{{greeting.text}},Angular</p>
     </div>
   </body>
   <script src="js/angular-1.3.0.js"></script>
 </html>