新入职的工程师第一次尝试AngularJS，入门教程

1 年 ago

新, 韵

3 minutes

你好，我是さいそん(@tak723sio)。
我在一家叫株式会社ギブリー的公司担任新入职的前端工程师。
今后我打算定期在Qiita上发布文章。
这次我要写关于我在工作中使用的AngularJS。
由于之前几乎没有接触过AngularJS，
所以我将从最基础的知识开始写下来！

AngularJS 是什么东西？

AngularJS — 超级JavaScript MVW框架，可在官方网站上查看。

AngularJS是由Google和社区共同开发的JavaScript框架。

据说，Angular本身是一个MVW（模型-视图-任何）框架。

不管怎样，试一试吧。

尝试使用AngularJS

要使用AngularJS，需要在HTML中

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

我打算使用Yeoman来创建项目的模板，因为如果我使用这个（指的是提到的方法），就需要从头开始做很多事情。

使用Yeoman创建AngularJS项目的模板。

我基本上是使用Mac来进行开发，所以我将介绍在Mac上的安装方法。
要安装Yeoman，您需要安装node.js。
推荐使用nvm（node version manager）来安装node.js，这样会更方便。
请参考以下链接进行安装：
使用git设置nvm，并介绍多个版本的node.js安装和切换方法 – テットリ

看到[SLab.]前端工程师必备！推荐使用的”Yeoman” – SaisonLab.的文章后，如果安装了node.js，建议您尝试安装Yeoman。

安装Yeoman生成器

经常被介绍的生成器是generator-angular，
但是我这次要用的是generator-gulp-angular (https://github.com/Swiip/generator-gulp-angular)。
原因是因为我比较喜欢gulp而不是Grunt呢。
好了，开始使用生成器之前，必须先引入gulp。

$ npm install -g gulp
$ npm install -g generator-gulp-angular

执行上面的两个命令，安装gulp和generator-gulp-angular这两个工具。然后

$ yo gulp-angular [app-name]

会执行并逐渐创建。


     _-----_
    |       |    .--------------------------.
    |--(o)--|    |         Welcome!         |
   `---------´   '--------------------------'|                          |
    ( _´U`_ )    |     You're using the     |
    /___A___\    |  fantastic generator for |
     |  ~  |     |      scaffolding an      |
   __'.___.'__   | application with Angular |
 ´   `  |° ´ Y ` |         and Gulp!        |
                 '--------------------------'

? Which version of Angular do you want? (Use arrow keys)
❯ 1.3.x (latest)
  1.2.x (legacy 2013-11-08)

我会选择1.3.x版本。

? Which Angular's modules would you want to have? (ngRoute and ngResource will be addressed after)
❯◉ angular-animate.js (enable animation features)
 ◉ angular-cookies.js (handle cookie management)
 ◉ angular-touch.js (for mobile development)
 ◉ angular-sanitize.js (to securely parse and manipulate HTML)

如果有不需要的东西，我们会在空间中取消选中。
在这里，暂时把全部都放进去。

? Would you need jQuery or perhaps Zepto? (Use arrow keys)
❯ jQuery 1.x (branch still supporting IE6, 7 and 8)
  jQuery 2.x (new version, lighter, IE9+)
  ZeptoJS 1.1.x (jQuery compatible but very much lighter)
  None (Angular will use its own jqLite)
Creative Cloud Files (unknown) Downloads

? Would you like to use a REST resource library?
❯ ngResource, the official support for RESTful services
  Restangular, an alternative service to handles RESTful requests
  None, $http is enough!

在这里，您可以选择您喜欢的物品。

? Would you like to use a router ?
  ngRoute, the official router
❯ UI Router, flexible routing with nested views
  None

下一个要使用的是Router模块。我们选择了UI Router。因为它非常方便。

? Which UI framework do you want?
❯ Bootstrap, the most popular HTML, CSS, and JS framework
  Foundation, "The most advanced responsive front-end framework in the world"
  Angular Material, the reference implementation of the Google's Material Design specification
  None

接下来选择设计（CSS）框架。
也请您选择您喜欢的那一款。
这次我们选择了Bootstrap。

? How do you want to implements your Bootstrap components?
  Angular UI Bootstrap, Bootstrap components written in pure AngularJS by the AngularUI Team
  AngularStrap, AngularJS 1.2+ native directives for Bootstrap 3
❯ The official jQuery implementation of Bootstrap
  No JavaScript, just CSS

使用官方提供的Bootstrap组件进行配置。

? Which CSS preprocessor do you want? (Use arrow keys)
❯ Sass (Node), Node.js binding to libsass, the C version of the popular stylesheet preprocessor, Sass.
  Sass (Ruby), Original Syntactically Awesome StyleSheets (requires Ruby)
  Less, extends the CSS language, adding features that allow variables, mixins, functions and many other techniques.
  Stylus, supporting both an indented syntax and regular CSS style.
  None, only the good old CSS

接下来是关于CSS的事情。根据您的喜好。
这次我们将使用Sass（Node）。

? Which JS preprocessor do you want? (Use arrow keys)
❯ None, I like to code in standard JavaScript.
  CoffeeScript, "a little language that compiles into JavaScript".
  ES6 (Traceur), ECMAScript 6 compiled with the Traceur compiler from Google.
  ES6 (6to5), ECMAScript 6 compiled with 6to5 which requires no runtime.
  TypeScript, a typed superset of JavaScript that compiles to plain JavaScript.

下一个是JS相关的内容。这里也可以根据您的喜好。由于是初学阶段，我选择了普通的JS。

❯ None, I like to code in standard HTML.
  Jade (*.jade)
  Haml (*.haml)
  Handlebars (*.hbs)

HTML模板引擎。我选择了常见的。

当你做出选择之后，文件将会开始生成。
如果中途有各种问题问到你，就选择适合自己的选项吧。

实际尝试运行一下

$ gulp serve

当执行它时，浏览器将启动并显示示例画面。我完成了！

总结

我详细而冗长地写下来，但我认为到目前为止应该会相对顺利。
下一次我们将使用这个项目文件来创作一些小东西。