Creating your initial page with AngularJS 1.x - ultimagriever/mean-apz GitHub Wiki

Create your index.html file

cd public
vi index.html

The index.html page will have our entire UI hooked into it. Our other HTML files will be components that will be bootstrapped here and appear as we access said components' routes.

Wait, are these the same routes we defined in our server.js file?

No. The AngularJS routes have nothing to do with Express routes. Express routes give varied server responses upon access, whereas AngularJS routes just define which component it should display in your application page, hence Single-page Application. You could crudely say that Express routes are back-end routes and AngularJS routes are front-end routes just for the sake of understanding the concepts and how they are different.

Our index.html should look roughly like this:

<!DOCTYPE html>
<html lang="pt-br" ng-app="employeesApp">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="ContentType" content="text-html; charset=utf-8" />
        <meta name="viewport" content="width=device-width; initial-scale=1" />

        <style type="text/css">
            body {
                min-height: 2000px;
                padding-top: 70px;
            }
        </style>

        <link href="/css/3rd-party.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="/js/3rd-party.js"></script>
    </head>

    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <div class="navbar-brand" href="#/">Employee Registry</div>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="navbar-nav nav">
                        <li class="active"><a href="#/">Home</a>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="container" ng-view>
            <h1>My first AngularJS 1.x app</h1>
        </div>
    </body>
</html>

Both ng-app and ng-view are AngularJS directives, which we should cover in the next step. ng-app will load every module, service, controllers and directives applied to the declared app, whilst our components will be loaded inside the div tag containing the ng-view directive.

Notice how we're loading here the 3rd-party.js and 3rd-party.css files we generated with Gulp. Instead of manually including every JavaScript and every CSS file in our bower_components folder, we're importing a single file comprising all of them, and, should we have to add more dependencies, we just have to update our gulpfile.js accordingly and run gulp in our terminal.

Start the server, then access localhost in your browser

npm start
open http://localhost:8080

You should see a Bootstrap-styled page displaying "My first AngularJS 1.x app".

Commit your changes

git add .
git commit -m "Create index.html page"
⚠️ **GitHub.com Fallback** ⚠️