angular2-github-app-bootstrap, 构建简单 Angular 2应用的练习

分享于 

9分钟阅读

GitHub

  繁體 雙語
Exercise for building simple Angular 2 apps
  • 源代码名称:angular2-github-app-bootstrap
  • 源代码网址:http://www.github.com/mgechev/angular2-github-app-bootstrap
  • angular2-github-app-bootstrap源代码文档
  • angular2-github-app-bootstrap源代码下载
  • Git URL:
    git://www.github.com/mgechev/angular2-github-app-bootstrap.git
    Git Clone代码到本地:
    git clone http://www.github.com/mgechev/angular2-github-app-bootstrap
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/mgechev/angular2-github-app-bootstrap
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    练习

    练习 Angular 2的基础。 本教程基于 Angular 2 alpha27和 angular2-seed。 为了尝试它,只需克隆 repo 并按照以下步骤操作。

    如果你在任何步骤上都可以使用,可以使用以下分支,它包含给定章节的最终解决方案:

    步骤 1

    • init.ts 导入 MODULE app,它位于同一目录中。 可以使用它的相对位置来指向它。
    • 使用组件注释的选择器属性,将 app/app.ts 组件的名称命名为 app
    • View 注释添加属性 templateUrl 中,它应该指向组件的app 模板。
    • 在组件的app 模板内添加以下标记:
    <h1>Hello Angular2!</h1>

    恭喜现在你已经有了一个工作的Angular 2应用程序 ! 你可以使用终端来测试它。 转到 angular2-github-app-bootstrap 目录并在终端窗口中键入 gulp serve.dev

    结果应如下所示:

    Step 1

    步骤 2

    • app/app.ts 中导入 home 组件并将它的作为 app 组件的依赖项添加。
      • 主组件位于目录 components/home的内部。 你可以使用它的相对路径。
      • 所有视图都接受指令作为依赖项。 通过添加传递给组件注释的对象的directive 属性,你可以定义 app 组件需要 home 作为依赖项。 属性接受指令的array 作为值。
    • home.ts 中,从 MODULE angular2/angular2 中导入以下注释和指令: ComponentViewNgForNgIf
    • NgForNgIf 作为 home 组件的依赖项添加,同样也将 home 添加为 app 组件的依赖项。
    • home 组件添加 templateUrl 属性,该属性指向适当的位置。
    • 向传递给 home 组件的组件注释的对象添加名为 selector的属性,并将其值 home
    • app/app.html 中,使用 home 元素( 删除 Hello Angular2 标题) 添加 home 组件。!
    • users 类的属性名为,它应该是类型,并且在 home的构造函数中应该用空的array 初始化。
    • 打开与 home 组件关联的模板,并进行以下更改:
      • 将名为 #currentuser的属性添加到带有 id user-input的输入。 这样你就可以使用 currentuser 来引用输入。
      • 将单击处理程序添加到输入旁边的按钮。 单击事件应使用 currentuser 文本输入调用方法 addUser
      • *ng-for 指令添加到 All Users 图例下表格正文中的第一个 tr 元素。 它应该在所有 users 上循环并在第一个单元格的链接中显示它们的NAME ( 注意: 你可以使用插入指令 {{ }} )。
      • 在第一个单元格中的链接中添加单击处理程序。 一旦单击事件,selectUser 方法就应该用 currentuser 作为参数调用。
      • 向第二个单元格中的按钮添加单击处理程序,一旦出现单击事件,则将 removeUser 方法调用当前用户。
    • 现在打开 home 组件并实现方法 addUserremoveUser,如下所示:
      • addUser(user) 应该将新用户添加到用户列表( 例如。 users array ) 可以选择你只能将 addUser 操作限制为不存在的用户。 将 currentuser 输入添加到用户列表后,不要忘记重置它的值。
      • removeUser(user) 应该从 users array 中删除给定的用户。

    太棒了第二步已经完成了 ! 如果没有停止 gulp serve.dev,只需保存更改的文件并刷新 http://localhost:5555 以查看刚刚实现的功能 !

    Step 2

    步骤 3

    你注意到在屏幕右侧单击列表中的任何用户时发生错误? 现在我们要修复这个问题 !

    • home.ts 内导入 UserDetails 组件,该组件位于 ../../components/user-details/UserDetails 并将它的作为 home 组件的依赖项添加。
    • 定义名为 selectUser(user:string)的方法,该方法实现以下逻辑:
      • selectedUser 设置为 null
      • loading 状态设置为 true。
      • 调用 getUser 方法,当前 user 作为参数传递。 getUser 将返回 promise,为promise添加解析处理程序。 处理程序应该接受一个参数,即用户,我们从github的API中得到。 在回调设置中,selectedUser的值和将 loading 状态更改为 false
    • 如果未取消注释,则取消注释底部的行并将指令添加到带有值 loading.spinner 元素( 例如。 当 loading 状态为 true 时,元素应该是可见的。
    • user-details 组件中添加两个属性:
      • [user] 属性,该属性应指向当前的selectedUser
      • *ng-if 属性( 指令),它应该具有如下布尔表达式的值: selectedUser!== null
    • 打开 UserDetails.ts 并向传递给注释的Component 调用的对象添加属性 properties。 它应该是一个带有一个值 'user'的array。 这样,我们就可以使用 [user] 属性将属性传递给 UserDetails 组件。
    • 现在打开 user-details.html 并进行以下添加:
      • 将名为 [src]的属性添加到 img 元素。 它应该指向 user.avatar_url
      • 到每个第二个单元格( 例如。 标签"用户名","追随者","跟随",等等 旁边的单元格使用插值指令添加以下属性:
        • {{user.login}}
        • {{user.followers}}
        • {{user.following}}
        • {{user.public_repos}}
    • 在最后一步,为了提供更好的用户体验,在 home 组件中,如果 removeUser 方法等于我们想要删除的用户,那么将 selectedUser的值设置为 null

    就是这样,你完成了这个练习 ! 你可以用你尝试"步骤 2"的方式来尝试 ! 恭喜这是你应该看到的最终结果: !

    Step 3

    捐赠

    这是自述文件的第一个迭代,因这里可能会有一些错误。错误或者任务不太清晰或者太详细。 如果你认为可以提高文档的质量,只需使用 fork 并发起请求请求,则会非常感激 !

    许可证

    MIT


    构建  angular  Building  EXE  
    相关文章