Sharing Top Content from the Angular-sphere.

Angular Best Practices – Julien Bouteloup – Medium

  • It’s not finished but it has been into draft mode for the past 2 years now…What we will be talking about:Folders organisation, components architectures, services, controllers, resources, directives, e2e tests, unit tests, tools like grunfile, jshint and etc around Angular and best practices.What we will NOT be talking aboutI will not be talking about es6 features in this medium article.
  • I wrote another article about the new architecture around Angular 2 and all the different fancy tools: es6, webpack, RxJS, Zone.js and Typings :)ArchitectureAngular Folder ArchitectureLooks like a basic start — but we will expand the app folder in the few minutes to make things quite interesting :)Normal basic project files.bowerrc: file to configure your bower.bowerrc.js.gitignore: to ignore the files that are automatically installed via npm install or bower install).
  • gitignorebower.json: list all the bower modules to be installed in the projectGruntfile.js: the task manager for your projectSmall part of gruntfile.js (otherwise it’s too long)packages.js: list all the npm modules to be install in the projectPartial parckage.json fileprotractor.conf.js: configuration file for your e2e (end to end) configuration file for your unit testsPartial view of karma.conf.js.jshintrc: configuration file improving the code quality of your project.jshintrcProject folderspublic: contains all your application filestest: contains all your test files for your applicationPublic folderPublic folderThe public folder is organised into two folders, one for the Javascript app code and one for the css folder.
  • The index.html is the top entry of your app project.Index.html — entry point of the appTo make this angular article very simple to understand — the different files are added at the bottom of the index.html file.
  • :)Please go deeper…Deep view of the app folderIt’s starting to be more interesting … So the app folder contains a components folder, app.js and state.js files.components: the project is organised into components — each part of your application is an isolated component.

It’s a complete and simple introduction to the best practices on how to organise your project with Angular. The below architecture had a lot of traction and good feedback from conferences, clients…

@jxpert_: “Angular Best Practices” by @bneiluj #Angular #bestpractice #angularjs #javascript…

— — It’s not finished but it has been into draft mode for the past 2 years now… — -

It’s a complete and simple introduction to the best practices on how to organise your project with Angular. The below architecture had a lot of traction and good feedback from conferences, clients and online communities that I have been involved in. Sorry if it’s a bit late…I was supposed to write this article 3 years ago…Better late than never, right? You can find the full Angular project on github. This article can be extended to Typescript. It’s not finished but it has been into draft mode for the past 2 years now…

What we will be talking about:

Folders organisation, components architectures, services, controllers, resources, directives, e2e tests, unit tests, tools like grunfile, jshint and etc around Angular and best practices.

I will not be talking about es6 features in this medium article. I wrote another article about the new architecture around Angular 2 and all the different fancy tools: es6, webpack, RxJS, Zone.js and Typings 🙂

Looks like a basic start — but we will expand the app folder in the few minutes to make things quite interesting 🙂

The public folder is organised into two folders, one for the Javascript app code and one for the css folder. The index.html is the top entry of your app project.

To make this angular article very simple to understand — the different files are added at the bottom of the index.html file. Normally in the new architecture with es6 and Webpack you will bundle them into one file and then add it to the index.html. But this is another story…well another article !

You bootstrap your angular app by calling ng-app=”app”. You then add the different components (views) by typing ui-view.

The views (the visuals on your page/DOM) will be displayed between the two div. Check your Browser debugger and you will see everything inside…Magic! 🙂

It’s starting to be more interesting … So the app folder contains a components folder, app.js and state.js files.

So when you call app in you index.html it actually uses base, state and components.

It use ui-router module behind the wood. It’s a This package / module is installed via bowerrc.json and then add it in index.html ! In this example, you want to redirect the user to /login in any case.

Think about a component as a piece of behaviour on your app. In this example we have a login component. The login component is responsible for login/logout the user through your app.

Angular Best Practices – Julien Bouteloup – Medium

Comments are closed, but trackbacks and pingbacks are open.