Angular入门笔记

自己总结的尚硅谷Angular课程笔记

1.入门介绍

1.1AngularJS是什么?

jQuery是js函数库

Angular是Google开源的JS结构化框架

官网:https://angularjs.org/

1.1.1AngularJS特性和优点

 Angular入门笔记_第1张图片

 

 

 

耦合度越低越好,避免牵一发而动全身的事情发生

1.1.2与jQuery比较

 

 

 

angular:在页面和内存之间建立管道,让数据在管道里来回流动

1.1.3AngularJS能做什么项目

构建单页面(SPA)Web应用或Web App应用

1)单页面应用(SPA):single page application

特点:

1.将所有的活动局限于一个页面

2.当页面中有部分数据发生了变化,不会刷新整个页面,而是局部刷新

3.利用的是ajax技术、路由

2

 

使用插件可以看到网页里使用的angular相关数据

 Angular入门笔记_第2张图片

没有使用angular会提示

 

1.1.4关于版本的问题

学的是1.*版本,而AngularJS还有2.*和4.*

1.*的版本采用的事JavaScript的语法

2.*和4.*用的事typescript的语法

1.2开发第一个AngularJS应用

1.2.1例子

实现效果:

 Angular入门笔记_第3张图片

1)jQuery实现

引入jQuery库

html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>title>
head>
<body>
<input type="text" id="name">
<p>您输入的内容是:<span id="contentSpan">span>p>


<script type="text/javascript" src="../../js/jquery/jquery-1.11.1.js">script>
<script type="text/javascript">
  $(function () {//document.ready文档加载完毕(页面的结构) 原生:window.onload:整个页面加载完毕,包括图片。。。
     
$('#name').keyup(function () {
          var name = this.value;
          $('#contentSpan').html(name);
      })
  })
script>
body>
html>

2)Angularjs实现

引入angularjs文件

       <script src="../../js/angular-1.2.29/angular.js">script>

html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>title>
head>
<body ng-app>

<input type="text" ng-model="username">
<p>您输入的内容是:<span>{{username}}span>p>
<script src="../../js/angular-1.2.29/angular.js">script>
<script type="text/javascript">

script>
body>
html>

3)理解第一个angularjs应用

 Angular入门笔记_第4张图片

 

 

 

1.2.2Webstorm设置

手动设置:

file→settings→editor→live templates

导入设置:

file→import settings

1.2.3引入AngularJS

使用

你可能感兴趣的:(Angular入门笔记)