学习AngularJS（一）入门

最新推荐文章于 2024-09-29 11:15:02 发布

羲少

最新推荐文章于 2024-09-29 11:15:02 发布

阅读量616

点赞数 1

分类专栏： AngularJS 文章标签：前端学习 AngularJS

本文链接：https://blog.csdn.net/weixin_42283664/article/details/80614330

版权

AngularJS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

官方中文网站：http://www.angularjs.net.cn/

API学习：https://www.runoob.com/angularjs/angularjs-intro.html

个人推荐慕课网的大漠穷秋的教学视频：

视频教程：https://www.imooc.com/learn/156

1.What is AngularJS?

AngularJS是一款优秀的前端JS框架。重点：JS框架！！！说明AngularJS是基于JavaScript。不了解JavaScript的同学应该先去了解JavaScript是什么，再来学习AngularJS。所有的学习都要从基层慢慢搭起。

2.Why learn AngularJS?

核心优点：模块化、自动化双向数据绑定、语义化标签、依赖注入等等。反正就是对html的一种扩展，比传统js开发更方便。（一般框架都是这样子滴，不然也不叫框架啦~）

3.How to learn AngularJS?

当程序员的都知道，不用多说，敲代码！写实例！

4.What tools for learning?

WebStorm ,Sublime,Google,Firefox +一堆方便开发的插件！

好，让我们真正开始学习AngularJS！

第一步：导入js

首先，想用框架什么导入什么文件！官网有不同版本说明：自己去看吧~

注意：AngularJS是Angular的第一个版本，从Angular2开始，AngularJS改名叫Angular，新的版本和第一版不兼容哦~

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

第二步：第一个实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <title>我的第一个AngularJS</title>
</head>
<body ng-app="one">

<div ng-controller="oneCtrl">
    {{ Name + " 学习"  }}
</div>

<script>
    var app = angular.module("one", []);
    app.controller("oneCtrl", function($scope) {
        $scope.Name = "dayOne";
    });
    //var 模块名 = angular.module('模块名'，['controllers','directives','services','routes','filters'...])   （格式）
    //ng-app 指定AngularJS的管理的管理范围（<body>中）
    //ng-controller 控制器，控制标签中的所有内容（<div>）
</script>
</body>
</html>

效果如下：