Skip to main content

Making It All Work Together - Controllers, Services and routes

Making It All Work Together
We have defined our resources, controllers, services, and routes and included the files in our index.html. Now let’s make them all work together.
Let’s set up our Angular app to use all of our components. We will use dependency injection and set up our Angular application.
// public/js/app.js
angular.module('sampleApp', ['ngRoute', 'appRoutes', 'MainCtrl', 'NerdCtrl', 'NerdService']);


Conclusion

Now we have an application that has a Node.js backend and an AngularJS frontend. We can use this foundation to build any sort of application moving forward. We can add authentication and CRUD functionality to create a good application.
Also, for those looking for this project with the addition of the Jade templating engine, Florian Zemke has created a Jade version at his GitHub repo.

NEXT STEPS

Moving forward, I’d encourage you to take this and see if it fits your needs. The point of this was to have a foundation for starting applications so that we aren’t reinventing the wheel every time we start a new project.
This is a very barebones example and for something more in depth, I’d encourage people to take a look at mean.io for a more in depth starter application.
Check out the Github repo for this project and take from it what you need. Sound off in the comments if you have any questions about how to expand this into your own applications.


Starter Kit

We’ve put this tutorial together as a starter kit at the Github repo. We’ll keep adding features to it on request and any updates we think will be helpful for applications.
Hopefully it will be a good foundation for any sort of Single Page MEAN Stack Application.

TO USE THE STARTER APP

  1. Download the code
  2. Install the npm modules: npm install
  3. Install the bower components: bower install
  4. Start the server: node server.js
  5. Visit the application in your browser at http://localhost:8080
  6. Use this starter kit to build any application you need.
Further Reading: When building MEAN stack apps, the backend Node application will usually be an API that we build. This will allow the Angular frontend to consume our API that we built through Angular services. The next step is to hash out building a Node API. This next tutorial will teach us that and then we can go further in depth of how to

Comments

Post a Comment

Popular posts from this blog

ASP.NET Core - MVC Design Pattern

The MVC (Model-View-Controller) design pattern is a design pattern that's actually been around for a few decades, and it's been used across many different technologies, everything from Smalltalk to C++ to Java and now in C# and .NET as a design pattern to use when you're building a user interface. The MVC design pattern is a popular design pattern for the user interface layer of a software application. In larger applications, you typically combine a model-view-controller UI layer with other design patterns in the application, like data access patterns and messaging patterns. These will all go together to build the full application stack. The MVC separates the user interface (UI) of an application into the following three parts − The Model  − A set of classes that describes the data you are working with as well as the business logic. The View  − Defines how the application’s UI will be displayed. It is a pure HTML which decides how the UI is going to loo...
Post a Comment
Read more
In a cloud computing system, there's a significant workload shift. Local computers no longer have to do all the heavy lifting when it comes to running applications. The network of computers that make up the cloud handles them instead. Hardware and software demands on the user's side decrease. The only thing the user's computer needs to be able to run is the cloud computing system's   interface software , which can be as simple as a Web browser, and the cloud's network takes care of the rest.
1 comment
Read more

Angular - Tutorial Part - 1 Application shell "Tour of languages"

The Application Shell Install the Angular CLI I nstall the  Angular CLI , if you haven't already done so. npm install - g @angular / cli Create a new application Create a new project named  angular-tour-of-languages  with this CLI command. ng new angular - tour - of -languages The Angular CLI generated a new project with a default application and supporting files. S erve the application Go to the project directory and launch the application. cd angular - tour - of - heroes ng serve -- open The   ng serve   command builds the app, starts the development server, watches the source files, and rebuilds the app as you make changes to those files. The   --open   flag opens a browser to   http://localhost:4200/ . You should see the app running in your browser. A ngular components The page you see is the  application shell . The shell is controlled by an Angular component named  AppComponent . Component...
Post a Comment
Read more