Angular.js学习-入门

最新推荐文章于 2023-09-17 02:39:54 发布

csdnluolei

最新推荐文章于 2023-09-17 02:39:54 发布

阅读量756

点赞数 3

分类专栏：【Angular.js】文章标签： Angular.js

本文链接：https://blog.csdn.net/csdnluolei/article/details/84202869

版权

【Angular.js】专栏收录该内容

2 篇文章 0 订阅

订阅专栏

官方文档 https://angular.io/guide/quickstart

一、Angular.js是什么？

Angular.js是一款为了克服HTML在构建应用上的不足而设计的优秀的前端JS框架。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到 HTML 页面。

　 Angular.js通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。

　gethub各个AngularJS版本下载：https://github.com/angular/angular.js/releases

AngularJS各种版本js文件下载 https://code.angularjs.org/

二、为什么有Angular.js，作用是什么？

AngularJS是为了克服HTML在构建应用上的不足而设计的。 AngularJS使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。

AngularJS 作用：

AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
AngularJS 可以在 HTML 元素"背后"添加代码。
AngularJS 支持输入验证。

AngularJS所需环境

（1）首先安装node.js

1、node.js是啥？

Node.js是一个Javascript运行环境(runtime environment)，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。Node.js 不是一个 JavaScript 框架，不同于CakePHP、Django、Rails。Node.js 更不是浏览器端的库，不能与 jQuery、ExtJS 相提并论。Node.js 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。
Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。 [2] Node.js是一个基于Chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动，非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

2、最新的Node.js 下载之后会有自带的npm，所以我们只要下载Node.js就可以。

（2）npm（node package manager）node的包管理工具

npm是什么 https://blog.csdn.net/knqiufan/article/details/78571947

三、安装过程

（1）首先安装node.js 安装包下载地址 https://nodejs.org/en/

很简单，傻瓜式安装，下一步，下一步，安装完成后，

（2）cmd 进入nodejs安装目录，执行命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

（这一步是通过国内的一个淘宝镜像下载cnpm）【这里用淘宝是因为国内对国外网站访问做了限制的原因】

cnpm下载成功之后，执行命令：

cnpm i -g @angular/cli --save-dev

（通过已经下载好的cnpm去安装Angular 的 @angular/cli：Angular CLI是一个命令行界面工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。）

下载完成之后，基本的angular 环境搭建完成。

四、然后我们新建一个项目

进入项目要存放的目录，我这里了就放在nodejs里面，执行命令：

ng new myproject

执行 ng new myproject 出错

解决方法: https://stackoverflow.com/questions/53132923/npm-warn-deprecated-circular-json0-5-9-while-install-angular-7

在使用angular CLI创建新应用程序之前，应使用以下命令，它会强有力地清理缓存。

npm cache clean --force

然后再创建项目

ng new myproject

需要稍等片刻，需要下载一些文件。。。。

创建完成后进入，输入命令：

ng serve

访问：

五、一个简单的AngularJS实例

<!DOCTYPE html>
<html ng-app="myapp">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- angular.js-->
		<script type="text/javascript" src="js/angular.min.js" ></script>
		<script>
			var app = angular.module("myapp",[]);
			app.controller("fuitCtrl", function($scope){
				$scope.fuit = {name: "apple", num: 5, price: 10.5};
			});
			
		</script>
	</head>
	<body>
        <h1>angular.js</h1>
        <div ng-controller="fuitCtrl">  
                名称<input type="text" id="name" ng-model="fuit.name" /> <br /> 
                数量<input type="number" id="num" ng-model="fuit.num" />  <br /> 
                单价<input type="number" id="price" ng-model="fuit.price"/> <br /> 
               {{'你购买了' + fuit.name +'需要付款total='+ fuit.num * fuit.price}}

        </div>  
       
	</body>
</html>

继续学习看这个 https://www.cnblogs.com/1996zy/p/7638101.html

csdnluolei

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Angular.js学习-入门

官方文档 https://angular.io/guide/quickstart一、Angular.js是什么？Angular.js是一款为了克服HTML在构建应用上的不足而设计的优秀的前端JS框架。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。 AngularJS 是一个 JavaScript 框架。它是一个...
复制链接

扫一扫

专栏目录