Skip to content

Instantly share code, notes, and snippets.

@escapedcat

escapedcat/app.js

Created July 28, 2014 10:19
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save escapedcat/9cdbabd0472646cc6cef to your computer and use it in GitHub Desktop.
Save escapedcat/9cdbabd0472646cc6cef to your computer and use it in GitHub Desktop.
Download ZIP
basic webpack angularjs example, based on phonecatApp tutorial (phonecat)
Raw
app.js
var phonecatAnimations = require("./animations.js");
var phonecatControllers = require("./controllers.js");
var phonecatFilters = require("./filters.js");
var phonecatServices = require("./services.js");
'use strict';
/* App Module */
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatAnimations',
'phonecatControllers',
'phonecatFilters',
'phonecatServices'
]);
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
Raw
index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/animations.css">
<script src="js/bundle.js"></script>
</head>
<body>
<div class="view-container">
<div ng-view class="view-frame"></div>
</div>
</body>
</html>
Raw
main.js
var jquery = require("../bower_components/jquery/jquery.js");
var angular = require("../bower_components/angular/angular.js");
var ngAnimate = require("../bower_components/angular-animate/angular-animate.js");
var ngRoute = require("../bower_components/angular-route/angular-route.js");
var ngResource = require("../bower_components/angular-resource/angular-resource.js");
var phonecatApp = require("./app.js");
Raw
webpack.config.js
module.exports = {
entry: './app/js/main.js',
output: {
filename: './app/js/bundle.js'
}
};
@dongshaohan
Copy link

Thank you!
That's good!
This solve my problems

@jharaphula
Copy link

Examples are the best way to learn AngularJS. Assume you already know JAVASCRIPT, then what more you required? Only Examples are good enough to get basics of AngularJS. Look at this link http://jharaphula.com/category/programming-solutions/learn-angularjs-with-examples here I collected all the fundamentals of AngularJS with examples. its easy n fun to learn.

@Axel554
Copy link

Axel554 commented Oct 12, 2018

Hi, please an example of controller.

why do you give me this error:
Uncaught ReferenceError: app is not defined

My controller:

app.controller ('login', ['$scope', '$window', '$rootScope', '$http', 'AuthenticationService', function ($scope, $window, $rootScope, $http, AuthenticationService) {

}]);

@pradeepkottalage
Copy link

I'm also getting same error as " app is not defined"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment