I am using AngularJS 1.6.4. I have a server spun up @8080 port (just making sure not to miss anything). Below is my code:
app.js
//Defines the root module, initialize with additional dependencies
angular.module("MyPhoneApp", ['ngRoute']);
angular.module("MyPhoneApp").component('greetUser', {
template: 'Hello, {{$ctrl.user}}!',
controller: function GreetUserController() {
this.user = 'world';
}
});
angular.module("MyPhoneApp").component('phoneList', {
templateUrl: 'app/phoneList.template.html',
controller: ['$http', function PhoneListController($http){
var self = this;
self.criteria = "model";
$http.get("app/phones.json").then(function(response){
self.phones = response.data;
});
}]
});
//Code for phone-detail snippet
angular.module("MyPhoneApp").component('phoneDetail', {
template: 'Hello world from Phone Detail component! {{$ctrl.phoneId}}',
controller: ['$routeParams',
function PhoneDetailController($routeParams) {
this.phoneId = $routeParams.phoneId;
}
]
});
//Routing code, to be seperated in different file named app.config.js
angular.module("MyPhoneApp").config(['$locationProvider', '$routeProvider',
function config($locationProvider, $routeProvider) {
$locationProvider.hashPrefix("!");
$locationProvider.html5Mode({
required : true,
requireBase : false
});
$routeProvider.when('/phones', {template:'<phone-list></phone-list>'})
.when('/phones/:phoneId', {template: '<phone-detail></phone-detail>'})
.otherwise('/phones');
}
]);
phoneList.template.html
<input type="text" class="form-control" ng-model="$ctrl.query" placeholder="Search Phones"><br/>
<select name="type" id="" ng-model="$ctrl.criteria" class="form-control" placeholder="Select Filter Criteria">
<option value="maker" >By Manufacturer</option>
<option value="model">By Model</option>
</select>
<ul type="none">
<li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.criteria" class="panel panel-success">
<a href="#!/phones/{{phone.id}}" class="thumb">
<img ng-src="{{phone.image}}" alt="{{phone.model}}" height="180px" width="150px"/>
</a>
<a href="#!/phones/1">
{{phone.maker}} : {{phone.model}}
</a><br/>
{{phone.desc}}
</li>
<li>
Number of phones : {{$ctrl.phones.length}}
</li>
</ul>
<pre>{{$ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.criteria | json}}</pre>
and index.html
<html>
<head>
<title>First AngularJS App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<base href="/"/>
</head>
<body ng-app="MyPhoneApp">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8 col-md-offset-2">
<div ng-view></div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-route.min.js"></script>
<script src="app/app.js"></script>
</html>
The issue is that whenever I have to place links, I have to put them with "#!/someplace/somevalue" and not "#/someplace/somevalue" (notice the exclaimation after hash) to make routing work. Using official AngularJS tutorial for this, I think there is something I am missing. Enabled html5Mode also for some ease, but in that case also need to put # on. What am I missing here?
