Angular Controller showing $ is not a function error in Dynamic Routing

Question

I am trying to create an Angular Dynamic Routing. My routing is like this:

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']).
  config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/', { templateUrl: 'partials/blank.html' });
    $routeProvider.when('/:name', { templateUrl: 'partials/blank.html', controller: PagesController });
    $routeProvider.otherwise({redirectTo: '/'});
  }]);

Here I am using $http to get a template file inside a controller and compile it to a div id like this:

function PagesController($scope, $http, $route, $routeParams, $compile) {
  $route.current.templateUrl = 'partials/' + $routeParams.name + ".html";

  $http.get($route.current.templateUrl).then(function (msg) {
    $('#view-template').html($compile(msg.data)($scope));
  });
}

In the template view, I have a div like this:

<div id="view-template" ng-view></div>

I thought the above code will compile and add the html data to the div but I am receiving the error that says: $ is not a function. What have I got wrong here?

EDIT: After the help from the comments and answers below

SOLUTION:: I was playing around with this a bit more and I went with another solution for this. I added the $route.current.templateUrl to the $scope.theTemplateUrl and then used ng-include in the template file. That did the trick and I also dont need to use the jquery $ function to manipulate the DOM.

Answer 1

Please make a fiddle. The limited scope of this snippet inhibits help :)

By just looking at what you are doing I can only make a few recommendations. But I think your issue lies in .html().

1. Stop using jQuery while you learn Angular.

2. Use $scope to change content on page. Instead of

   $('#view-template').html($compile(msg.data)($scope));

do this

$scope.viewTemplate = msg.data

then use angular in your view :)

1. Only use the controller to coordinate the flow of information. There should not be and DOM manipulation happening here. The DOM should reflect a state of the controller.

2. Define routes in your app config. This is not correct.

   $route.current.templateUrl = 'partials/' + $routeParams.name + ".html";

I have some example site in my github repo that you can look at if you want to see a few full sites working: https://github.com/breck421

It seems like you have missed some key parts of Angular. Make sure you take your time and learn it right. It will make you life much easier later.

Thanks,

Jordan

Added for a route provider example:

MyApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
    templateUrl: 'js/views/index.html',
    controller: 'AppController',
    activeTab: 'home'
})
.when('/home', {
    templateUrl: 'js/views/index.html',
    controller: 'AppController',
    activeTab: 'home'
})
.when('/thing1', {
    templateUrl: 'js/views/thing1.html',
    controller: 'Thing1Controller',
    activeTab: 'thing1'
})
.otherwise({redirectTo: 'home'});

}]);

Then use links like this: Components

EDIT Adding a compile directive per request:

angular.module('CC.directive.Compile', [], function($compileProvider) {
    $compileProvider.directive('compile', ['$compile', function($compile) {
        // directive factory creates a link function
        return function(scope, element, attrs) {
            scope.$watch(
                function(scope) {
                    return scope.$eval(attrs.compile);
                },
                function(value) {
                    element.html(value);
                    $compile(element.contents())(scope);
                }
            );
        };
    }]);
});

Answer 2

The $ function is defined by jQuery, not angular. Make sure that you have included the jQuery library in order to use $