当前位置: 首页 > 软件库 > Web应用开发 > Web框架 >

angular-material-course

Angular Material In Depth
授权协议 MIT License
开发语言 JavaScript
所属分类 Web应用开发、 Web框架
软件类型 开源软件
地区 不详
投 递 者 万俟渝
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

IMPORTANT

This repository currently contains the code for two versions of the course.

The new version of the course is called Angular Material In Depth:

Angular Material In Depth

You can find the starting point of this new version of the course in the 1-start branch.

On the other hand, if you are looking for the previous version of the course (soon to be archived) and called the Angular Material Course, then you can start your course with the initial branch 1-navigation-and-containers.

Angular Material Course

This course repository is updated to Angular v12.

Installation pre-requisites

IMPORTANT: Please use NPM 5 or above, to make sure the package-lock.json is used.

For running this project we need and npm installed on our machine. These are some tutorials to install node in different operating systems:

Its important to install the latest version of Node

Installing the Angular CLI

With the following command the angular-cli will be installed globally in your machine:

npm install -g @angular/cli 

How To install this repository

We can install the master branch using the following commands:

git clone https://github.com/angular-university/angular-material-course.git

This repository is made of several separate npm modules, that are installable separately. For example, to run the au-input module, we can do the following:

cd angular-material-course
npm install

Its also possible to install the modules as usual using npm:

npm install 

NPM 5 or above has the big advantage that if you use it you will be installing the exact same dependencies than I installed in my machine, so you wont run into issues caused by semantic versioning updates.

This should take a couple of minutes. If there are issues, please post the complete error message in the Questions section of the course.

To Run the Development Backend Server

We can start the sample application backend with the following command:

npm run server

This is a small Node REST API server.

To run the Development UI Server

To run the frontend part of our code, we will use the Angular CLI:

npm start 

The application is visible at port 4200: http://localhost:4200

Important

This repository has multiple branches, have a look at the beginning of each section to see the name of the branch.

At certain points along the course, you will be asked to checkout other remote branches other than master. You can view all branches that you have available remotely using the following command:

git branch -a

The remote branches have their starting in origin, such as for example 1-navigation-and-containers.

We can checkout the remote branch and start tracking it with a local branch that has the same name, by using the following command:

  git checkout -b section-1 origin/1-navigation-and-containers

It's also possible to download a ZIP file for a given branch, using the branch dropdown on this page on the top left, and then selecting the Clone or Download / Download as ZIP button.

Other Courses

Angular PWA Course

If you are looking for the Angular PWA Course, the repo with the full code can be found here:

Angular PWA Course - Build the future of the Web Today

Angular Security Masterclass

If you are looking for the Angular Security Masterclass, the repo with the full code can be found here:

Angular Security Masterclass.

Angular Security Masterclass

Angular Advanced Library Laboratory Course

If you are looking for the Angular Advanced Course, the repo with the full code can be found here:

Angular Advanced Library Laboratory Course: Build Your Own Library.

Angular Advanced Library Laboratory Course: Build Your Own Library

RxJs and Reactive Patterns Angular Architecture Course

If you are looking for the RxJs and Reactive Patterns Angular Architecture Course code, the repo with the full code can be found here:

RxJs and Reactive Patterns Angular Architecture Course

RxJs and Reactive Patterns Angular Architecture Course

Angular Ngrx Reactive Extensions Architecture Course

If you are looking for the Angular Ngrx Reactive Extensions Architecture Course code, the repo with the full code can be found here:

Angular Ngrx Reactive Extensions Architecture Course

Github repo for this course

Angular Ngrx Course

Angular 2 and Firebase - Build a Web Application Course

If you are looking for the Angular 2 and Firebase - Build a Web Application Course code, the repo with the full code can be found here:

Angular 2 and Firebase - Build a Web Application

Github repo for this course

Angular firebase course

Complete Typescript 2 Course - Build A REST API

If you are looking for the Complete Typescript 2 Course - Build a REST API, the repo with the full code can be found here:

https://angular-university.io/course/typescript-2-tutorial

Github repo for this course

Complete Typescript Course

  • angular ui组件 Learn how to use Angular Material in this full course for beginners from Codevolution. 本课程为Codevolution的初学者学习如何使用Angular Material。 Angular Material provides a set of reusable and accessib

  • Icon Icon Name mat-icon code ac_unit ac unit icon <mat-icon>ac_unit</mat-icon> airport_shuttle airport shuttle icon <mat-icon>airport_shuttle</mat-icon> all_inclusive all inclusive icon <mat-icon>all_

  • angular示例 为什么要使用动画? (Why use Animations?) Modern web components frequently use animations. Cascading Style-sheets (CSS) arms developers with the tools to create impressive animations. Property transit

  • Angular 6 已经正式发布了!这个主要版本并不关注于底层的框架,更多地关注于工具链,以及使 Angular 在未来更容易快速推进。 作为发布的一部分,我们同步了主要的框架包 (@angular/core, @angular/common, @angular/compiler, etc), Angular CLI, 以及 Angular Material + CDK。现在全部都是作为6.0.0

  • Angular 修仙之路目录 angular-movie-app what-is-a-service-in-angular-js-why-to-use-it Angular6 学习笔记——路由详解 【前端】Angular8入门教程笔记+Angular material安装与使用 Angular服务 Angular服务是单例对象,在应用程序的生存期内只实例化一次。它们包含在应用程序的整个生命周期中维

  • Create a index.html: <!DOCTYPE html> <html> <head> <title>Really Understanding Angular 2 - The Fundamentals</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <li

 相关资料
  • Material Design for Angular 是 Angular 官方团队开发的基于最新版本 Angular 的 Material  Design 风格的框架,可和 Nest.js 搭配使用做全栈开发。 针对 Angular 1 版本的实现 https://www.oschina.net/p/material-design-for-angularjs Angular Material 目

  • 中后台前端应用框架 基于最新Angular 11框架与Material 2技术的企业级中后台前端应用框架。 React => https://github.com/stbui/prophet Plaform Feature 基于 Material Design 精心设计 多种颜色方案,有多个预定义的配色方案 Flex Layout 强大的布局,并支持响应式设计 组件丰富,提炼后台应用的典型页面和场

  • Material Angular Dashboard Welcome to the first dark dashboard with Google Material Design and Angular! Its much more fun with the demo. Material admin template is absolutely free for commercial usage

  • Laravel 5.3 Angular Material Starter Demo An online demo is available. Angular (2+) update While this starter used to be an excellent starting point for Laravel 5 & Angular 1.x, using Angular 1.x resu

  • Angular 12, NgRx and Angular Material Starter by @tomastrajan Table of Content Live Demo Getting Started Useful Commands Make It Your Own Goals Learning Materials List of Projects Built Using This Sta

  • Angular Material 是 Angular JS 开发人员的UI组件库。Angular Material 组件有助于构建有吸引力,一致且功能强大的 Web 页面和 Web 应用程序,同时遵循现代 Web 设计原则,如浏览器可移植性,设备独立性和优雅降级。