zoukankan      html  css  js  c++  java
  • AngularJs 开发app之准备工作1_bower安装及使用

    写在前面的话:

      前段时间一直在学vue, 近来机缘巧合又得到一个angular 项目实例,现试试angular 做一个项目

    一、AngularJs 开发app之准备工作:

      (1)安装个开发调试工具先:

        batarang(https://github.com/angular/batarang    下载v0.10.7)

      (2)安装依赖调试工具,这里选择的是 bower :

        使用npm安装:

        npm install -g bower           (我安装到的是 bower@1.8.0)

      (3)初始化一个项目(空文件夹,叫 webapp,在此文件夹初始化一下使之成为 git 仓库,再使用 git bash 开始进行以下操作):

        bower init

        然后会让你选择一些选项,可参考以下截图(刚开始使用的是 cmd命令行,结果在使用bower 安装 angualar文件的时候总是报错,说什么git...后来我就改成 git bash往下做了~,但是前面这块的截图还是用的 cmd 命令行~将就看一下吧):

        注:是否私有你可以自己及随便选,我看视频上选的是 no.

           

        然后你的 webapp文件夹下就多了一个  bower.json 文件。

      (4)使用 bower install  angularJs

        bower install --save angular

        成功以后便会如下图所示,且 webapp 文件夹下会多了一个名为“bower_components”文件夹:

          

        上图显示,安装的是 angular1.6.2版本的,在移动端开发使用最新版是ok的,但是如果是在 pc端的话,考虑到兼容性,一般是使用1.2版本的,切换版本可以进行如下操作:

           bower install --save angular#1.2

        因为我要使用的是移动端开发版本,就不用变换版本号啦!~

    目前我实践的这个项目是不会用到以下的一些知识点的,所以如果想知识跟我一起学习这个项目的话,可以不看~

    如果你想了解更多,请继续往下看~  

      (5)新建一个 .bowerrc文件

        直接在webapp 文件夹下新建当然是不行的,会提示输入文件名,所以采用以下办法:

          null > .bowerrc

        虽然报错了(如下图),但是还是创建成功了!

         

      (6)在.bowerrc 文件中,指定一个新生成目录名称(如:lib)。也就是在其中添加如下代码:

    {
        "directory":"lib"
    }

      (7)安装一个 requirejs:

        bower install --save requirejs

        成功后如截图所示,同时 webapp 文件夹下,会新生成一个名为“ lib ”文件夹,文件夹中会包含之前配置好的 angular 以及 requirejs 文件夹,并且 bower.json文件中也会出现 requirejs 的版本相关信息。

        

       因为 requirejs 是接下来不需要用到的,所以 可以通过 npm uninstall 卸载掉

          bower uninstall --save requirejs

        运行以后发现,bower.json文件中 以及 lib 文件中 的requirejs 相关信息已经被清除~

    至此,把 .bowerrc 以及 lib文件夹都删了吧~

  • 相关阅读:
    xhEditor入门基础
    【Scala-ML】使用Scala构建机器学习工作流
    POJ 2482 Stars in Your Window(线段树)
    Xcode6 UIWebView与JavaScript交互(issue fix)
    poj1159--Palindrome(dp:最长公共子序列变形 + 滚动数组)
    把握linux内核设计思想(十二):内存管理之slab分配器
    Andriod DiskLruCache的使用案例
    Lambda 表达式的演示样例-来源(MSDN)
    HDU 4857 topological_sort
    Thinking in React(翻译)
  • 原文地址:https://www.cnblogs.com/Christeen/p/6490537.html
Copyright © 2011-2022 走看看