javascript代码实例教程-Angularjs学习---angularjs环境搭建,ubuntu 12.04下安装nodejs、npm和karma

发布时间:2019-02-04 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Angularjs学习---angularjs环境搭建,ubuntu 12.04下安装nodejs、npm和karma脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 HelloWorld !

 

新建一个helloworld.htML

 

复制代码

<!doctyPE html>

<html ng-app>

    <head>

        <script src="Angular.js"></script>

    </head>

    <body>

        Hello {{&#39;World'}}!

    </body>

</html>

复制代码

然后将下载的Angular.js拷到与helloworld.html的同一目录

 

效果如下所示:

 

 

 

 

 

3.helloworld.html代码说明

标记ng-app告诉AngularJS处理整个HTML页并引导应用:

 

<htmlng-app>

注意,使用双大括号标记{{}}的内容是问候语中绑定的表达式,这个表达式是一个简单的字符串‘World’。

 

Hello {{'World'}}!

4.示例2

本示例演示AngularJS双向数据绑定(bi-directional data binding):

 

编辑前面创建的helloworld.html文档。

将下面的代码复制到您的HTML文件。

刷新浏览器窗口。

源代码

 

复制代码

<!doctype html>

<html ng-app>

    <head>

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

    </head>

    <body>

        Your name: <input type="text" ng-model="yourname" placeholder="World"><hr>

        Hello {{yourname || 'World'}}!

    </body>

</html>

复制代码

效果:

 

 

 

该示例有一下几点重要的注意事项

 

文本输入指令<input ng-model="yourname" />绑定到一个叫yourname的模型变量。

双大括号标记将yourname模型变量添加到问候语文本。

你不需要为该应用另外注册一个事件侦听器或添加事件处理程序!

现在试着在输入框中键入您的名称,您键入的名称将立即更新显示在问候语中。 这就是AngularJS双向数据绑定的概念。 输入框的任何更改会立即反映到模型变量(一方向),模型变量的任何更改都会立即反映到问候语文本中(另一方向)。

 

5.angularjs框架简介

模板(Templates)

模板是您用HTML和CSS编写的文件,展现应用的视图。 您可给HTML添加新的元素、属性标记,作为AngularJS编译器的指令。 AngularJS编译器是完全可扩展的,这意味着通过AngularJS您可以在HTML中构建您自己的HTML标记!

 

应用程序逻辑(LOGic)和行为(Behavior)

应用程序逻辑和行为是您用JavaScript定义的控制器。AngularJS与标准AJAX应用程序不同,您不需要另外编写侦听器或DOM控制器,因为它们已经内置到AngularJS中了。这些功能使您的应用程序逻辑很容易编写、测试、维护和理解。

 

模型数据(Data)

模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是Javascript对象、数组或基本类型,这都不重要,重要的是,他们都属于AngularJS作用域对象。

 

AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变,AngularJS会立即刷新反映在视图界面中,反之亦然。

 

 

 

6.ubuntu 12.04下安装nodejs、npm和karma

1)安装nodejs

直接输入命令sudo apt-get install nodejs 安装的是0.6版本的,这个会出现问题,导致接下来安装js测试工具karma,出现问题.

 

所以用下载安装自己编译的方式,https://nodejs.org/download/,我这里下载的是https://nodejs.org/dist/v0.10.26/node-v0.10.26.tar.gz

 

然后,执行命令 

 

tar zxvf node-v0.10.26.tar.gz 

cd node-v0.10.26

./configure

make

sudo make install

这样直接编译会出错!!

 

必须先把其依赖环境搭建好,必须先执行如下命令:

 

sudo apt-get install g++ curl libssl-dev apache2-utils

sudo apt-get install gIT-core

git如果已经安装则不需要再安装了.

 

当然也可从github上直接clone了,即使用如下命令:

 

git clone git://github.COM/ry/node.git

cd node

./configure

make

sudo make install

测试是否成功???

 

amosli@amosli-pc:~$ node --version

v0.10.26

查看版本是否正确,这里是正确的.

 

2)安装npm

sudo apt-get install npm

3)安装karma

sudo npm install -g karma

只要安装nodejs正确,那么后两步将会十分顺利.

 

否则安装karma时将会报如下的错误:

 

复制代码

amosli@amosli-pc:~$ sudo npm install -g karma

npm http GET https://registry.npmjs.org/karma

 

npm ERR! Error: failed to fetch From registry: karma

npm ERR!     at /usr/share/npm/lib/utils/npm-registry-client/get.js:139:12

npm ERR!     at cb (/usr/share/npm/lib/utils/npm-registry-client/request.js:31:9)

.....

复制代码

karma以前叫testacular,是js的测试框架.

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-Angularjs学习---angularjs环境搭建,ubuntu 12.04下安装nodejs、npm和karma全部内容,希望文章能够帮你解决javascript代码实例教程-Angularjs学习---angularjs环境搭建,ubuntu 12.04下安装nodejs、npm和karma所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。