I'll start off by pointing out that, yes, Angular 4 is already released (don't worry they just skipped 3). I plan to work with 4 soon enough, but so far what I've done has been in 2 so that's what I'm documenting. Since 4 is already out it can be a bit tricky to find the documentation for 2, so here's a link to it: https://v2.angular.io/docs/ts/latest/. Now that that's out of the way, let's dig right in.
OK, so you'll still need npm (and therefore node.js) installed so if you haven't done that yet, do it now. With npm installed you can install the Angular CLI globally with the following command: npm install @angular/cli -g. All of the CLI documentation can be found here.
I've checked in the code that corresponds to this series on Github. You can find it here. For this installment of this guide you'll want to checkout the first-installment branch.
Once the CLI is installed you just have to run the following command in the directory you want to create your project: ng new [project name] where [project name] is the name of your project. So I'm going to create a project at D:\Dev\Learning\Angular2\cli called ProveIt. I'll navigate to D:\Dev\Learning\Angular2\cli in my command prompt and run ng new ProveIt. Creating the project using the CLI is the easiest way I've found. You should be aware that the CLI uses Webpack so if you come across some bit of help (that's probably outdated) that talks about SystemJS, that probably won't work for you if you're following this guide. ng new initializes git and installs a ton of npm packages for you so it takes a few minutes to complete. Once it does finish, though, you actually have a working, testable application. To prove it you can navigate into the directory you created (for me, that's D:\Dev\Learning\Angular2\cli\ProveIt) and run the command ng serve --open. That will build your Angular 2 project, host it on port 4200, and launch your default browser to the root level of the application. You should see a message that says (as of this writing) "app works!". Congratulations! You've "written" an Angular 2 app!
So now we have the default app running, which is a great start, but it isn't really an application. At least, it doesn't do anything. Let's use the CLI to add a new component to the application, called students. Open a new command prompt and navigate to your new project (D:\Dev\Learning\Angular2\cli\ProveIt). From there you want to go forward to src/app and run the command ng g component students. This command is much faster, and creates four new files and modifies one file. It's time to open our application. I prefer VS Code, but you can use whatever you want. Open the ProveIt folder and we'll explore some of the files that have been created so far.
.angular-cli.json
This is the configuration file used by the CLI to bootstrap the application when you run ng serve. The CLI includes a built-in SASS parser so one of the first things I always do is change my styles.css to styles.scss and update this file to reference the .scss file instead of the .css file (line 22 as of this writing, but it's in the "styles" array). If you want to include any 3rd party scripts (like Bootstrap) you'd add their relative path (assuming you added them via npm they'd be in node_modules/...) to the "scripts" array. Finally, if you have nested directories with assets you want to deploy (like images or customized fonts) you'd add those to the "assets" array. Just adding the top-level folder should be enough to include the entire directory in the output.index.html
This file is the only file initially loaded by the application. Since Angular is focused on creating Single Page Applications (SPAs) this is that single page. From here on out everything that gets loaded just enhances the DOM or functionality of this one page. If you look in the <body> tag you'll see that we start off with an unknown (at least to HTML) tag called <app-root>. As we'll see in a few paragraphs this is actually an Angular component. Just keep this in mind as we move forward.src/main.ts
This is essentially the entry point for the compilation of your application. I'm not going to lie and tell you I know exactly how this works, because I'm still a little murky on it, but I can tell you that it's where your browser gets told which module to start with. It should be defaulted to AppModule.src/app/app.module.ts
This is the declaration of the AppModule. You can see at the end of this file that AppModule is exported, which allows it to be used by main.ts as the bootstrap module. You can also see that this file imports the necessary modules from various @angular folders that you're going to need to run this application in the browser. Finally, there are two components imported and listed in the declarations section. Part of using the Angular CLI to generate a new component (like we did earlier) is that the CLI will edit this module to import and declare your new component automatically so you don't have to worry about that part.src/app/app.component.ts
This is where the actual AppComponent is declared and exported so it can be used in the AppModule as the bootstrap component (which means it's where the whole application starts). You can see that the Component recipe is imported from @angular/core and then the class (AppComponent) is decorated with the @Component decorator, which specifies the selector for the component, the location of the template for the component, and the location of the stylesheet for the component. This component has a single property, called title.src/app/app.component.html
This is the markup that will be injected wherever Angular 2 finds our app component being used. In other words, when we use <app-root></app-root>, Angular 2 will inject whatever is in this template file inside those tags. Right now it's just a placeholder that displays the title inside of an <h1>, which is why we see "app works!" when we run the application. The value of title is being set in app.component.ts and then displayed here.If we examine the students.component.ts and students.component.html files that were created by the Angular CLI we'll see that they are very similar to the app.component.* files we just looked at. Components are the basic force within Angular 2. Components allow us to manipulate the DOM to do and show what we want. One thing we haven't done yet is use our StudentsComponent in our application. Let's go back to index.html and take another look. Knowing what we know now about our AppComponent and its selector we can see that Angular is being told to inject the contents of src/app/app.component.html between the opening and closing <app-root> tags. We want to do basically the same thing with our StudentsComponent so let's make that happen. Open src/app/app.component.html and replace {{title}} with <app-students></app-students>. If you left Angular CLI serving the application then just look at that tab in your browser again and you should see that the message has changed to "students works!". What's happening is that Angular finds the <app-root> tag and injects the contents of the AppComponent in there. While Angular is injecting that content it comes across the <app-students> component and realizes it needs to inject the contents of students.component.html into the AppComponent markup. Since the content of our StudentsComponent is a simple message that says "students works!" (as you can see by opening src/app/students/students.component.html) that's what we see in our browser.
I'm going to end this post here because I think there's been a lot to digest so far. This will only be the first in a series that I'll hopefully get up pretty quickly. I'm still learning Angular 2 so don't take what I say as absolute truth. Remember that I'm just putting up my thoughts to help me out in the future.
No comments:
Post a Comment