Skip to main content

Posts

Structure of Angular Projects

In our last session we created a project now let's see what files and folders we have in this new project. The first folder we have in our project hello-world is -  (See the screens of package.json here😊) package.json e2e :- you just expand it and you will see a bunch files there. e2e which stands for end to end and this is where we write end to end tests for our application. If you have not worked with e2e tests let me tell you that these are basically automated tests that simulate a real user, so we can write code to launch our browser, navigate to the homepage of our application, click a links, fill out a form, click a button and then assert that there is something on a page, this is an example of e2e tests, it comes in picture when you learn angular well, so just for now dont w😊rry about it. node_modules - so below e2e we have node_modules and this is where you store all the third party libraries that our application may depend upon. keep in mind that this ...
Post a Comment
Read more
Recent posts

Your first angular app

As we have installed angular CLI in previous article now we can create a new angular project. So back to the terminal Let's call this project hello_world. ~$ng new hello_world  here is my practice screen-  also i'm not mac user😉 So this will generates a bunch of files and folders and then it going to use NPM to download third party libraries. So our project is successfully created, now to start coding we need a code editor. the editor i'm gonna use for practice is visual studio code or vs code it's beautiful, cross-platform and light-weight editor, you can download it from code.visualstudio.com   . If you dont like this editor feel free to use any editor that you prefer, we can use sublime, atom or any other editors, if you gonna use vs code i want you to add it to the path so you can easily open it from the terminal. Open vs code here if you are using mac press shift+cmd+p or if you are using wind😉ws press shift+ctrl+p this opens-up the comm...
Post a Comment
Read more

Setting Up the Development Environment

In this article i'm gonna show you how to setup your development envirnoment and create your first angular project. The first thing you need to install is the latest version of the  node , if you have never worked with node before, it's basically a runtime envirnoment for executing javascript code outside the browser. Here in angular we are not going  to work with node but node provides some tools that we need to build angular projects. For installation of node just go to nodejs.org  on this page you can see the latest version of node for your operating system here in my case the latest stable version is v8.9 and the latest version is v9.5 now this latest  version has more features but its not stable yet so just go ahead and install the latest stable version v8.9 when you do that open up the terminal on mac or command prompt on windows (let me show you few commands) and type  ~ $node --version (on mac👈😉)  v8.9.4 so you can see on my machine i'm run...
Post a Comment
Read more

Architecture of Angular Application

All right... now you know what angular is lets take a look at architecture of angular applications. a lot of modern applications have at-least two parts front-end and back-end. The front-end also called the client is the part that runs on the web browser and this is what the user sees and interact with. I t essentially includes the user interface or UI of our application. We use HTML / CSS / TypeScript / Angular to build the front-end and the back-end sits on a web server or multiple web servers on the cloud and it is responsible for storing the data and doing any kind of processing. Our front- end or the client application talks to the back-end to get or save the data. One of the question that lot of beginners have is how do we save our data in angular?...Well you don't in most of the cases you don't save the data on the client because it can easily disappear as the user clears the browser data or moves to different computer thats why we store the data on the server. Le...
Post a Comment
Read more

Let's Start ng5

Angular🤔 one of the most growing framework to develop client applications. Angular is a framework for building client applications in HTML,CSS, JavaScript/Typescript. Why ng?🤔 We can use plain .js or jQuery but as our application gets more complex, javascript or jquery code is hard to maintain and hence we need a way to properly structure our application for these there are javascript patterns out there, like Revealing module pattern or prototype pattern but these patterns are hard to understand and applications developed using .js or jquery are hard to test. Here angular comes in picture to make client application development easier. Benefits🤔 👉Angular gives our application a clean structure (loosely coupled) i.e. easy to understand and indeed easy to maintain. 👉 In angular most of the code we can reuse. Specially when dealing with user's navigation and browser history ( how don't worry we can see it in upcoming articals) 👉Angular makes our applications more te...
5 comments
Read more